第6章 过渡与动画《Vue应用程序开发》教学课件.pptxVIP

《Vue应用程序开发》?精品课件合集?精品课件合集 Vue应用程序开发（第六章 过渡与动画） 目 录1、过渡与动画入门案例2、单元素、组件过渡3、多个组件的过渡 1过渡与动画入门案例1.1 简述1.2 transition组件 1. 过渡与动画的入门案例Vue实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果。过渡其实就是淡入淡出的效果。Vue会在适当的时机触发CSS过渡或动画，也可以提供相应JavaScript钩子函数在过渡过程中执行自定义的DOM操作。1.1 简述 1. 过渡与动画的入门案例在 Vue 中，提供了实现过渡动画的内置组件 transition。基本用法就是给我们需要动画的标签外面嵌套 transition 标签。实现过渡动画一般格式：1.2 transition组件使用过渡组件 transition。transition !--需要动画的div标签-- divHello/div/transition 1. 过渡与动画的入门案例Vue提供了6个CSS类名在enter/leave的过渡中 切换。1.2 transition组件v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 1. 过渡与动画的入门案例1.2 transition组件v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 1. 过渡与动画的入门案例1.2 transition组件 1. 过渡与动画的入门案例transition组件的具体使用，及CSS类名的使用。如果 transition 组件定义了 name,这时所有“v-”开头的 class 类名更换为“fade-”开头。1.2 transition组件style/*进入和离开的效果*/.fade-enter-active, .fade-leave-active { transition: opacity .5s;}/*进入之前和离开之后的效果*/.fade-enter, .fade-leave-to{ opacity: 0;}/style 1. 过渡与动画的入门案例transition组件的具体使用，及CSS类名的使用。1.2 transition组件div id=demo button v-on:click=show = !show Toggle/button transition p v-if=showHello.../p /transition/divscript new Vue({ el: #demo’, data: { show: true } })/script 2单元素、组件的过渡2.2 animate.css 结合 transition 实现动画2.1 transition 标签结合 CSS 样式实现动画 2. 单元素、组件的过渡Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。 条件渲染（使用 v-if）组件根节点条件展示（使用 v-show）动态组件 2. 单元素、组件的过渡2.1 transition 标签结合 CSS 样式实现动画常用的过渡使用通常使用 CSS 过渡。在代码中设置 CSS 样式来实现过渡 fade-enter-active 、 fade-leave-active、 fade-enter、 fade-leave-to。style/*进入和离开的效果*/.fade-enter-active, .fade-leave-active { transition: opacity .5s;}/*进入之前和离开之后的效果*/.fade-enter, .fade-leave-to{ opacity: 0;}/style 2. 单元素、组件的过渡2.2 animate.css 结