过渡和动画
使用<transition> 组件包裹
例： <transition name="fade">
<div v-if="true">过渡动画</div>
</transition>
style：.fade-enter-active, .fade-leave-active {transition: opactiy .5s}
.fade-enter, .fade-leave-to{opacity:0;}
以上切换v-if的状态能够让div元素渐显渐隐，而不是直接添加删除
原理是VUE通过tansition组件的name属性值，然后使用它在过渡的各个节点为包含的元素添加类名。当元素被添加到文档或者从文档中移除时，会分别应用enter和leave两类过渡。以下是会添加的类名：
{name}-enter（常用）:这个类名会在元素被插入DOM时加入，然后在下一帧立刻移除。可以使用它来设置那些需要在元素开始进入过渡时移除的CSS属性。
{name}-enter-active（常用）: 在元素整个动画阶段应用。和-enter 同时被添加，然后在动画完成时被移除。适用于设置css过渡时间长度，过渡的属性和使用的曲线函数。
{name}-enter-to: 这个类名会在-enter类名从元素移除的同时添加到元素上，适合用来设置那些在元素开始进入过渡时添加的css属性，通常在-enter类上设置与之相反的过渡属性好些
{name}-leave：在离开过渡中，在离开过渡时被添加，下一帧被移除。
{name}-leave-active（常用）: 在离开过渡中，用于离开过渡的整个阶段。
{name}-leave-to（常用）: 在离开过渡被触发之后下一帧生效，在完成过渡之后被移除
js过渡动画
<transition>还提供用于实现的js动画钩子,这些钩子函数和用于css的过渡的类名类似。
beforeEnter：进入动画前开始触发，适合设置初始值
enter：这个钩子会在进入动画开始被触发，可以在这里运行动画。可以使用done回调来标明动画已经完成
afterEnter：动画执行完成时被触发
enterCancelled：进入动画被取消时触发
beforeLeave：这个钩子等同于进入动画的beforeEnter钩子，会在离开动画开始前被调用
leave：对于离开动画而言等同于进入enter 钩子，可以在这里进入动画
afterLeave：会在离开动画执行完成时被触发
leaveCancelled：在离开动画被取消时触发
这些钩子会以时间的形式在transiton组件上触发
例：
<transition v-on:before-enter="test1" v-on:enter="test2" v-on:leave="test3">
<div v-if="true">过渡动画</div>
</transition> //script methods:{ test1(el){ el.style.opacity = 0;}, test2(el){ TweenLite.to(el,0.6,{opacity:1,onComplete:done});}, test3(el){
TweenLite.to(el,0.6,{opacity:0,onComplete:done});
}
使用js动画可以创建比使用css过渡复杂的多的动画效果，包括多步动画，或每次显示不同的过渡效果等，但css的性能更好，所在一般能用css实现就使用css。