一.vue.transition
过渡过程
vue-transition在过渡动画的不同时期通过切换不同class，给绑定元素添加移除样式，达到过渡效果。以显示隐藏为例：
它有六个阶段，每个阶段给元素添加不同样式
v-enter：进入过渡前的样式
v-enter-active:进入过渡时的样式
v-enter-to:进入过渡结束时的样式
v-leave：离开过渡前的样式
v-leave-active:离开过渡时的样式
v-leave-to:离开过渡后的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
.xxx-enter-active, .xxx-leave-active {
定义过渡样式，默认写成v-enter形式，给transition命名后，用name替换v。
transition: opacity .5s;
}
.xxx-enter, .xxx-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用自定义的动画 -->
<button @click='show1=!show1'>显示/隐藏</button>
<transition name='xxx'>
//transition是vue封装的插件，引用时将要引用过渡动画的标签放入transition标签中即可，name属性用来命名过渡插件
<div v-show='show1'>
//标签绑定v-show指令，show1是Boolean类型变量，在data中将其初始值设为true，点击事件使show1值取反。v-show=“true”显示
<h1>我是用来演示动画的-1</h1>
</div>
</transition>
<hr>
二.animate.css
使用方法：
1.用link标签引入animate动画库
2.将需要使用过渡动画的标签放入transition标签中，绑定过渡样式
<!-- 使用animate.css动画，工作中常用 -->
<button @click='show2=!show2'>显示/隐藏</button>
<transition
enter-active-class="animated tada"
//绑定进入时样式，固定写法,tada是引用的具体样式
leave-active-class="animated bounceOutRight">
//绑定离开时样式，固定写法,bounceOutRight是引用的具体样式
<div v-show='show2'>
<h1>我是用来演示动画的-2</h1>
</div>
</transition>
<hr>
三.过渡模式
<!-- 学习使用mode属性 -->
<!-- 注意要给元素指定key值 -->
<button @click='show3=!show3'>显示/隐藏</button>
<transition name='fade' mode='out-in'>//mode指定动画模式，先进入动画，后执行隐藏动画
<div v-if='show3' key='1'>
<h1>我是用来演示动画的-3</h1>
</div>
<div v-else key='2'>
//key的作用是为了更高效的更新虚拟dom，vue在相同的标签名元素中做过渡切换时，设置不同的key只可以使得vue将它们区分开,防止渲染错误
<h1>我是用来演示动画的-4</h1>
</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show1: true,
show2: true,
show3: true
}
})
</script>
</body>
</html>
网友评论