第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：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡