Vue应用程序开发（第2版）课件 第6章Vue.js过渡和动画css过渡css动画（1-2节）.pptxVIP

第6章：Vue.js过渡和动画《Vue应用程序开发》

010203005Part16.1CSS过渡Part26.2CSS动画Part36.3JavaScript过渡Part46.4自定义过渡目录CONTENTS

第6章Vue.js过渡和动画Vue.js过渡可以让我们的页面元素在出现和消失时实现多种过渡效果。具体体现在：Vue.js在插入、更新或者移除DOM时，提供多种不同方式的过渡效果。Vue.js提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的元素或组件。简而言之，你可以使用Vue.js的transaction组件，结合CSS动画(animation)、过渡(transaction)或javascript操作DOM来让你的元素或组件动起来。

6.1CSS过渡CSS过渡是指元素在DOM插入、移动或状态切换（如显示或隐藏）时呈现的平滑过渡的效果，常见的过渡有淡入淡出（透明度渐变）、位移飞入等，Vue.js的CSS过渡会自动为目标元素添加6个核心过渡类名（基于transition组件的name属性生成前缀，默认前缀为v-）。

6.1CSS过渡对class定义的解释如下：（1）v-enter-from：进入动画的起始状态，在元素插入之前添加，在元素插入完成后的下一帧移除。（2）v-enter-active：进入动画的生效状态，应用于整个进入动画阶段，在元