当插入，更新或从DOM中删除项目时，Vue提供了多种应用转换效果的方法。这包括以下工具：
自动为CSS转换和动画应用类集成第三方CSS动画库，如Animate.css使用JavaScript在转换挂钩期间直接操作DOM整合第三方JavaScript动画库，例如Velocity.js
在这个页面上，我们只会介绍进入，离开和列表转换，但您可以看到管理状态转换的下一部分。
过渡单个元素/组件
Vue提供了一个transition包装组件，允许您在以下上下文中为任何元素或组件添加进入/离开转换：
有条件呈现(使用v-if)有条件显示(使用v-show)动态组件组件根节点
这就是一个例子：
Toggle
hello
new Vue({ el: #demo, data: { show: true }}).fade-enter-active, .fade-leave-active { transition: opacity .5s}.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0}
切换
hello
transition插入或移除组件中包含的元素时，会发生以下情况：
1. Vue会自动嗅探目标元素是否有CSS转换或动画应用。如果是这样，CSS转换类将在适当的时机添加/删除。
2. 如果转换组件提供了JavaScript钩子，这些钩子将在适当的时机调用。
3. 如果没有检测到CSS转换/动画，并且没有提供JavaScript钩子，插入和/或删除的DOM操作将在下一帧立即执行(注意：这是一个浏览器动画框架，与Vue的概念不同nextTick).Transition ClassesThere有六类申请进入/离开转换。
4. v-enter：输入的起始状态。插入元素之前添加，插入元素后删除一帧。
5. v-enter-active：输入的活动状态。在整个进入阶段应用。插入元素之前添加，当过渡/动画完成时删除。该类可用于定义输入转换的持续时间，延迟和缓动曲线。
6. v-enter-to：仅适用于版本2.1.8+。结束进入状态。插入元素后添加一个框架(同时v-enter删除)，当转换/动画完成时删除。
7. v-leave：开始状态请假。当离开转换被触发时立即添加，在一帧后删除。
8. v-leave-active：离开的活动状态。在整个离开阶段应用。当离开转换被触发时立即添加，当转换/动画结束时删除。该类可用于定义离开转换的持续时间，延迟和缓动曲线。
9. v-leave-to：仅适用于版本2.1.8+。结束离开状态。加入一个帧一个离开转换被触发(在相同的时间之后v-leave被移除)，当过渡/动画完成除去。
这些类将与过渡的名称为前缀。这里的v-前缀是你使用没有名字的元素时的默认值。如果你使用例子，那么这个v-enter类将会是my-transition-enter。v-enter-active和v-leave-active让您能够为进入/离开转换指定不同的缓动曲线，您将在下面的部分中看到一个示例.CSS转换一种最常见的转换类型使用CSS转换。下面是一个例子：
Toggle render
hello
new Vue({ el: #example-1, data: { show: true } })/* Enter and leave animations can use different */ /* durations and timing functions. */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }
CSS动画CSS动画以与CSS转换相同的方式应用，区别在于v-enter不是在插入元素后立即移除，而是在animationend事件中。这里是一个例子，为了简洁起见，省略了前缀CSS规则：
