Vue内置组件—transition简单原理详解

基本概念Vue提供多种不同方式在插入、更新或移除DOM时应用过渡效果自动应用CSS过渡和动画中的类可与第三方结合使用CSS动画库，例如Animate.css在transition钩子函数中使用JavaScript来直接操作DOM。您可以使用第三方JavaScript动画库，例如Velocity.js。简单用法使用v-if/v-show来控制显示和隐藏，使用transition组件来控制它在变化过程中，一个页面子组件router-view消失和隐藏，transition组件用来控制它的变化过程。类名介绍v-enter：定义进入transition的起始状态。元素插入前生效，元素插入后下一帧移除。v-enter-active：定义进入转换激活时的状态。在整个进入过渡阶段应用，在插入元素之前应用，并在过渡/动画完成后移除。此类可用于将处理时间、延迟和曲线函数定义为转换。v-enter-to：2.1.8及以上版本定义了enter过渡的结束状态。在插入元素后应用下一帧（同时移除v-enter），在过渡/动画完成后移除。v-leave：定义离开转换的开始状态。退出转换被触发后，它会立即在下一帧被删除。v-leave-active：定义离开转换激活时的状态。在整个退出过渡阶段应用，在触发退出过渡时立即应用，并在过渡/动画完成后移除。此类可用于定义离开转换的处理时间、延迟和曲线函数。v-leave-to：2.1.8及以上版本定义离开过渡的结束状态。在离开过渡被触发后应用下一帧（同时v-leave被移除），在过渡/动画完成后被移除。以上就是vuejs官网的介绍和下面我平时记录的笔记。结合图文，更容易理解一些变化的原理。:0属性“1”，监听不透明度属性变化时间为3s“2”动画第二帧：不透明度：0，属性“1”移除，导致“2”监听执行时间变化动画最后一帧：动画结束，全部移除动画进程消失：开始前一帧：点击消失动画，元素从块变为无，动画开始前一帧，只插入并监听opacity属性变化时间为3s“4”动画第二帧：插入，“3”属性opacity：0导致“2”监听执行事件，改变动画的最后一帧：动画结束，去掉所有常用的功能，添加一个过渡动画。看两张图就够了原创文章，转载请注明原文链接http://blog.wwenj.com/index.p...