"fade">
"show">hello world
复制代码当一个元素被transition包裹之后，Vue会自动地分析元素的css样式，然后构建动画的流程。
显示：
在动画即将被执行的瞬间，会往内部的div上自动地增加两个class，分别是 fade-enter 和fade-enter-active。当动画第一帧执行结束之后，transition这个标签，vue知道它是一个动画效果。vue会在动画运行到第二帧的时候，vue会把之前的fade-enter去掉，再增加fade-enter-to。动画继续执行，直到结束的瞬间，vue会把fade-enter-active 和 fade-enter-to这两个class去掉。
隐藏：
vue会自动构建隐藏地动画流程，隐藏的第一个瞬间的时候，vue会自动生成两个类，分别是fade-leave 和 fade-leave-active。第二帧的时候去掉fade-leave ，增加fade-leave-to。最后一帧，去掉fade-leave-active 和 fade-leave-to 。
所有前缀以fade- 开头是因为 name=“fade”，如果没有fade ，默认的开头是“v-”
@keyframes bounce-in {
0% {
transfrom: scale(0);
}
50% {
transfrom: scale(1.5);
}
100% {
transfrom: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
复制代码在Vue中使用Animate.css库
1.必须使用自定义class形式命名来使用Animate.css
2.class类里面必须包含animated这个具体的类，然后需要根据入场效果和出场效果的不同，将类名写在第二个位置。
"fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
"show">hello world
复制代码 "fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
"show">hello world
复制代码使用appear-active-class这样自定义动画的class ，要记得在类名上再写一个appear 属性。上面例子意思是在动画第一次显示是也有 animated swing的效果。
在vue中同时使用过渡和动画
实际上Animate.css提供的动画原理就是 @keyframes 这种css3的动画效果。
过渡
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
复制代码"fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
"show">hello world
复制代码我们定义的fade-enter-active 和 fade-leave-active 的过渡（transition）时间是3s，但是Animate.css源码里的animated动画（@keyframes）是1s。这时候要设置 type
"fade"
type="transition"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
"show">hello world
复制代码意思是这里既有keyframe的动画又有transition的动画，动画时长以type里设置的动画类型为准。
也可以自定义动画播放时长
:duration="10000"
复制代码:duration="{enter: 5000,leave:10000}"
复制代码Vue中的Js动画与Velocity.js的结合
a.动画显示钩子
@before-enter = "handleBeforeEnter"
handleBeforeEnter: function(el) {
//el :transition 包裹的div标签
el.style.color = "red";
},
复制代码@enter = "handleEnter"
handleEnter: function(el,done){
//done回调函数，当动画执行结束之后，记得手动地调用done回调函数
setTimeout(()=>{
el.style.color = "green";
}, 2000);
setTimeout(()=>{
done();
},4000);
},
复制代码@after-enter = "handleAfterEnter"
handleAfterEnter: function(el) {
el.style.color = "black";
},
}复制代码b.动画消失钩子
@before-leave
@leave
@after-leave
c.Velocity.js
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el,done){
Velocity(el,
{opacity: 1},
{duration:1000,
complete:done});
},
handleAfterEnter: function(el) {
alert("动画结束");
},
复制代码Vue中多个元素或组件的过渡
a.多个元素的过渡：
Vue在动画（在两个元素进行切换的时候）会尽量地复用dom，为了消除复用机制，给每个元素不同地的key值。
Vue在transition还提供了mode配置参数，来设置多个元素切换时的效果。
"fade" mode="in-out">
"show" key="hello">hello world
"bye">bye world
复制代码.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 1s;
}
复制代码b.多个组件的过渡效果：（动态组件）
"app">
"fade" mode="out-in">
"type">
复制代码Vue中的列表过渡 transition-group
"app">
"(item,index) of list" key="item.id">
{{item.title}}----{{item.id}}
复制代码Vue中的动画封装
"app">
"show">
hello world
"show">
bye world
复制代码