Vue.js 3.x前端开发技术与实战 课件 第6章Vue.js过渡与动画.pptx

第6章-Vue.js过渡与动画(4学时)教学目标1.熟悉过渡类名的含义和命名规范。2.掌握单元素/单组件的过渡方法。3.掌握初始渲染过渡的方法。4.掌握列表进入/离开、排序和交错过渡的实现方法。5.学会编写带有Vue.js过渡和动画效果的页面。6.1单元素/组件的过渡使用情形如下：（1）条件渲染（使用v-if）（2）条件展示（使用v-show)（3）动态组件（4）组件根节点Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：（1）在CSS过渡和动画中自动应用class。（2）可以配合使用第三方CSS动画库，如Animate.css。（3）在过渡钩子函数中使用JavaScript直接操作DOM。（4）可以配合使用第三方JavaScript动画库，如Velocity.js。Vue提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。Vue提供了<transition>的封装组件，可以给任何元素和组件添加进入/离开过渡。Vue的transiton标记的语法:<transition?name="slide-fade">??<div>??<p?v-if="flag"><img?src="image-6-1.jpg"></p>??</div>?</transition>?【例6-1】单元素（图像）过渡实战6.1.1过渡的类名在进入/离开的过渡中，会有6个class切换（v代表在没有transitionname的时候调用）。（1）v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。（2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。（3）v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter被移除)，在过渡/动画完成之后移除。（4）v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。（5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。（6）v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除)，在过渡/动画完成之后移除。6.1.1过渡的类名过渡属性与不透明度的关系图对于这些在过渡中切换的类名来说，如果使用不带name属性的<transition>，则“v-”将作为这些类名的默认前缀。如果使用了<transitionname="my-transition"></transition>，那么v-enter会替换为my-transition-enter-from。v-enter-active和v-leave-active可以控制进入/离开过渡的不同的缓和曲线。6.1.2CSS过渡该案例使用两个transition标记，一个带有name属性，一个不带name属性。带name属性的过渡标记适用类样式以”slide-fade-”开开头，不带name属性的过渡标记适用样式以“v-”开头。以下样式同时定义了过渡时间函数：.slide-fade-leave-active{transition:all.8scubic-bezier(1.0,0.5,0.8,1.0);}常用的过渡都是使用CSS过渡，同时可以设置持续时间和动画函数。【例6-2】与【例6-1】有些类似，只是在使用CSS过渡时定义动画函数。【例6-2】CSS过渡实战6.1.3CSS动画../vue-6-3.gif【例../vue-6-3.gif6-3../vue-6-3.gif】../vue-6-3.gifCSS../vue-6-3.gif动画实战。所谓动画就是让一个元素从一个状态逐渐向另一个状态转变的过程。可以在这个过程中改变元素的CSS属性。动画可以反复播放。CSS动画（CSSAnimations）用法同CSS过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。第10行和第13行定义类名为“animation-enter-active（入场动画的时间段）”和“.animation-leave-active（离场动画的时间段）”的样式，绑定动画myAnimations，并设置延时和反转效果。第17～21行定义关键帧,指定动画名称为“myAnimations”，