当元素在更新、插入、删除时添加不同的效果，这个效果有两部分：“过渡”和“动画”。vue本身是没有动画的，它引入的是css3中的过渡与动画。
过渡与动画
过渡：就是指元素从一种状态逐渐变为另一种的效果。使用过渡时，我们要指定添加效果的css属性和效果的持续时间。过渡的作用是使得效果在变化时更平滑。过渡是vue自带的特效。
动画：过渡只能设置起始状态的变化，而“动画”除了起始，能设置更多状态。比如说用百分比指定变化时间，0%是动画开始，100%是动画结束。使用动画时，要指定动画的名称和总作用时间。
进入.png
离开.png
单个元素的过渡
1.vue 有内置的过渡组件<transition>，该组件用于包裹要实现过渡效果的元素或组件；
2.<transition>可以在条件渲染 ( v-if )、条件展示 ( v-show )上使用，也可以在动态组件、组件根节点上使用；
3.<transition>并不是添加以后就可以起作用了，它的本质是对元素添加了css过渡。要在样式里设定过渡使用的效果；
4.样式选择器的前缀是可以设置的，通过<transition>的name属性自定义，如果不设置，那么选择器就是默认的前缀“v-”。
举个栗子：
v-enter.png
1、 .fade-enter为元素进入过渡时添加的效果，fade就是前缀，和组件的name属性要一致;
2、Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
- v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除；
- v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数;
- v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除；
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除;
- v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数;
- v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
单个元素的动画
1、使用动画的方法和过渡的一样，利用<transition>组件给元素或组件添加对应的样式；
2、使用@keyframes规则创建动画，这个规则用于指定元素从原来的样式变为新样式：
- 把@keyframes 绑定到选择器上，不然就没有动画效果；
- 在选择器内规定动画的名称和时长（默认时长为“0”）；
- 在@keyframes 内设置具体的效果。
举个栗子：
<style>
.fade-enter-active{
animation:fade-in 1s;
}
.fade-leave-active{
animation:fade-in 1s reverse;
}
@keyframes fade-in{
0%{
transform:scale(0);
}
50%{
transform:scale(1.5);
}
100%{
transform:scale(1);
}
}
</style>
<body>
<div id="demo">
<transition name="fade">
<p v-if="show">欢迎来到极乐世界</p>
</transition>
<button @click="show=!show">动画</button>
</div>
<script>
new Vue({
el:"#demo",
data:{
show:true
}
})
</script>
</body>
多个元素的过渡
利用v-if/v-else
仅适用于不同的元素。举个栗子：
<style>
.fade-enter-active{
transition:all 3s ease;
}
.fade-leave-active{
transition:all 1s cubic-bezier(1.0,0.5,0.8,1.0);
}
.fade-enter,.fade-leave-to{
transform: translateX(30px);
opacity: 0;
}
#demo{
margin-left: 50px;
margin-top:50px;
}
</style>
<body>
<div id="demo">
<transition name="fade">
<!--不同的元素-->
<div v-if="show">欢迎来到极乐世界</div>
<p v-else>今天适合出去散步</p>
</transition>
<button @click="show=!show">请点击我</button>
</div>
<script>
new Vue({
el:"#demo",
data:{
show:true
}
})
</script>
</body>
用key特性标记元素
适用于同一标签元素。key的作用相当于元素id，对vue来说，每个key值是唯一的。举个栗子：
<style>
.fade-enter-active,.fade-leave-active{
transition:opacity 1s;
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
</style>
<body>
<div id="demo" class="demo">
<transition name="fade">
<button v-if="show" key="on" @click="show=false">on</button>
<button v-else key="off" @click="show=true">off</button>
</transition>
</div>
<script>
new Vue({
el:"#demo",
data:{
show:true
}
})
</script>
</body>
使用第三方动画库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<!--用link来引入第三方动画库-->
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">使用animate</button>
<!--自定义类名要先添加animated，这个动画库才会生效;
在transition标签中添加animate属性,用以在组件中添加animate动画-->
<transition enter-active-class="animated fadeInRightBig" leave-active-class="animated flipOutY">
<v-tpl v-if="isShow"></v-tpl>
</transition>
</div>
<template id="tpl">
<ul class="nav-up">
<li><p>程序媛</p></li>
<li><p>边城学校</p></li>
<li><p>欢迎你</p></li>
</ul>
</template>
<script type = "text/javascript">
new Vue({
el: '#box',
data: {
isShow:false
},
components:{
'v-tpl':{
template:'#tpl'
}
},
mounted(){
this.isShow=true
}
});
</script>
</body>
</html>
列表过渡
使用vue中的<transition-group>组件向列表添加过渡或动画。
<transition-group>与<transition>
- <transition-group>被渲染的内部元素要使用唯一的key属性值；
- 当元素被渲染到网页上后，<transition>不会呈现出来，只在对应状态下添加对应的类名；而<transition-group>则会以真实的元素呈现，默认情况是<span>。
网友评论