《Vue.js 前端开发技术与实践》课件-第7章 vue过渡与动画

第7章Vue过渡与动画

transition组件Vue提供了transition组件，在条件渲染(使用v-if)、条件展示(使用v-show)、动态组件及组件根节点可以给任何元素和组件添加进入/离开过渡。transition组件只会把过渡效果应用到其包裹的内容上。transition组件应用CSS过渡或动画Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类，共6个类，如下表所示：过渡类型说明v-enter进入过渡的开始状态，作用于开始的一帧v-enter-active进入过渡生效时的状态，作用于整个过程v-enter-to进入过渡的结束状态，作用于结束的一帧v-leave离开过渡的开始状态，作用于开始的一帧v-leave-active离开过渡生效时的状态，作用于整个过程v-leave-to离开过渡的结束状态，作用于结束的一帧在进入/离开的过渡中，这6个类之间切换，在一个过渡周期中这6个类存在的时间点如图所示。自定义类名对于这些在过渡中切换的类名来说，如果使用一个没有name属性的<transition>，则v-是这些类名的默认前缀。如果使用了name属性，那么这些类名的前缀就是name属性值-，如<transitionname="my-transition">，那么v-enter会替换为my-transition-enter。单元素/组件过渡transition组件中只包裹一个元素，在该元素插入或删除时定义过渡动画。

<transition

name="fade"

>

<p

v-if="already"><button>取号预报名</button></p>

</transition>

/*.fade-enter定义进入过渡的开始状态*/

/*.fade-leave-to定义离开过渡的结束状态*/

.fade-enter,

.fade-leave-to

{

opacity:

0;

transform:

translateX(100px);

}

/*进入过渡和离开过渡的过程中

*/

.fade-enter-active,

.fade-leave-active

{

transition:

all

2s;

}多个元素过渡transition组件中包裹多个元素，这些元素插入或删除时定义过渡动画。<transition

name="fade"

appear

mode="out-in">

<p

v-if="copyright"

key="1">

<button>取号预报名</button>

</p>

<p

v-else

key="2">

先阅读报名需知后报名</p>

</transition>过渡模式新旧两个元素参与过渡的时候，新元素的进入和旧元素的离开会同时触发，这是因为<transition>的默认行为进入和离开同时发生了。如果要求离开的元素完全消失后，进入的元素再显示出来（如开关的切换），可以使用transition提供的过渡模式mode，来解决当一个组件离开后，另一个组件进来时发生的位置的闪动或阻塞问题。过渡模式过渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。in-out：表示新元素先进行过渡，完成之后当前元素过渡离开out-in：表示当前元素先进行过渡，完成之后新元素过渡进入多个组件过渡多个组件的过渡较为简单，不需要使用key属性，只需要使用动态组件。列表过渡（1）<transition-group>组件渲染时它会以一个真实元素呈现：默认为一个<span>，可以通过tag属性更换为其他元素。（2）<transition-group>组件mode属性不可以用，不能设置过渡模式，不用相互切换特有的元素。（3）内部元素总是需要提供唯一的key属性值。（4）CSS过渡的类将会应用在内部的元素中，而不是这个组件/容器本身。列表过渡使用transition-group组件使用过渡钩子函数实现过渡动画可以在使用transition组件时通过v-on指定绑定JavaScript钩子，transition过渡周期有如下这些钩子。<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on: