基本概念

当插入、更新或移除DOM时，Vue提供了各种不同的应用程序转换效果

CSS过渡和动画中类的自动应用可以配合第三方CSS动画库，如Animate.css，在过渡钩子函数中使用JavaScript直接操作DOM，也可以配合第三方JavaScript动画库，如Velocity.js简单使用

使用v-if/v-show控制显示和隐藏，使用过渡组件控制页面子组件router-view的消失和隐藏，使用过渡组件控制其更改流程模板//子组件过渡名称=' fade 1 ' router-view/router-view/transition//if/show控制过渡名称=' fade 2 ' div v-show=' I stage '/div/transition/模板类名简介

V-enter:定义转换的开始状态。它在元素插入前生效，并在元素插入后的下一帧被移除。V-enter-active:定义转换生效时的状态。在整个过渡阶段应用，在元素插入前生效，并在过渡/动画完成后将其移除。该类可用于定义进入过渡的过程时间、延迟和曲线函数。V-enter-to:版本2.1.8及以上定义了过渡的结束状态。下一帧在元素插入后生效(同时，v-enter被移除)，并在过渡/动画完成后被移除。V-leave :定义了离开转换的开始状态。当出发转换被触发时，它立即生效，并且下一帧被移除。v-休假-激活：定义休假过渡生效时的状态。它应用于离开过渡的整个阶段，在离开过渡被触发时立即生效，并在过渡/动画完成后被移除。该类可用于定义离开过渡的过程时间、延迟和曲线函数。v-leave-to :版本2.1.8及以上定义了离开转换的结束状态。下一帧在触发离开过渡后生效(同时删除v-leave)，并在过渡/动画完成后删除。以上是vuejs官网对我平时记录的以下笔记的介绍，结合图文更容易理解

变化原理

出现动画过程：

开始前一帧：点击显示动画，元素从无变为块。在动画开始前一帧插入opacity33600属性“1”，监控3s“2”的opacity33600属性变化时间

动画第二帧：opacity:0，属性“1”被删除，导致* * 2 * *监控执行时间发生变化

动画的最后一帧：动画结束，所有内容都被移除

动画过程消失：

开始前一帧：点击消失动画，元素从块变为无。只需在动画开始前一帧插入并监控3s“4”的不透明度属性更改时间

动画的第二帧：插入，“3”属性opacity:0导致“2”监视执行事件改变

动画的最后一帧：动画结束，所有内容都被移除

正常功能下看两张过渡动画就够了

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。