transition
-
name 用于自动生成 CSS 过渡类名。例如：name: fade 将自动拓展为 .fade-enter ，.fade-enter-active等。默认类名为 "v"
-
appear ，是否在初始渲染时使用过渡。默认为 false。
-
css ，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
-
type，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
-
mode ，控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时生效。
-
duration， 指定过渡的持续时间。
CSS 动画 animation
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend事件触发时删除。
过渡的类名
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
-
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
-
v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
-
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
-
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
-
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
同时使用过渡和动画(type)
同时使用过渡和动画时，需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
显性的过渡持续时间 (duration)
可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript钩子函数
可以在属性中声明 JavaScript 钩子
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > </transition>
methods: { beforeEnter: function (el) {}, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { done() }, afterEnter: function (el) {}, beforeLeave: function (el) { }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { done() }, }
注意：当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
注意：推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
初始渲染的过渡(appear)
可以通过 appear 特性设置节点在初始渲染的过渡
多个元素的过渡(key)
对于原生标签可以使用 v-if / v-else 实现过渡，当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。
也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，
使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。
<transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition>
computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } }
过渡模式（mode）
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
-
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
多个组件的过渡
多个组件的过渡只需要动态组件就可以实现，不需要使用 key。
transition-group
-
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
-
过渡模式不可用，因为我们不再相互切换特有的元素。
-
内部元素 总是需要 提供唯一的 key 属性值。
-
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
-
v-move
Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置。FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡
注意：使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。