transition内置组件实现元素/组件的过渡或动画

vue内部封装了一个实现过渡或动画的组件transition，被它包裹的元素或组件会在插入，更新或者移除DOM元素时应用过渡或动画效果。

过渡或动画触发的情形

在vue中出现元素插入、更新或者移除的情形有以下几种，也就是说transition组件包裹的元素出现以下几中情形时，将应用过渡或动画效果：

• 初始渲染时


• 条件渲染（v-if / v-show）


• 动态组件 component配合is特性切换组件


• 列表渲染（v-for)

过渡或动画的实现方式

transition组件要实现过渡或动画的方式有两种：

• 绑定特定的CSS类名


• 绑定特定的JS事件

特定的CSS类名钩子

在进入/离开的过渡或动画中，会有 6 个 class 切换，然后在特定的类中使用CSS的transition属性实现过渡效果，使用CSS3的animation属性实现动画的效果。

• v-enter


• v-enter-active



• v-enter-to



• v-leave


• v-leave-active


• v-leave-to

具体过程：

• v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。


• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类中可以使用transition / animation属性定义进入进入过渡的过程时间，延迟和曲线函数。


• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。


• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除


• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类中可以使用transition / animation属性定义进入离开过渡的过程时间，延迟和曲线函数。


• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

上面的v代表transition组件的name的值。如，那么 v-enter 会替换为 my-transition-enter

自定义钩子类名，结合第三方动画库

transition组件除了提供prop除了name，还有以下自定义钩子类名的属性：

• enter-class


• enter-active-class



• enter-to-class (2.1.8+)



• leave-class


• leave-active-class


• leave-to-class (2.1.8+)

补充CSS3属性transition / animation语法

transition: property duration timing-function delay;
transition-property: 设置要使用过渡效果的 CSS 属性的名称。
transition-duration: 规定完成过渡效果需要多少秒或毫秒，必须设置，否则时长为 0，就不会产生过渡效果。
transition-timing-function：规定速度效果的速度曲线，值可以为：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)。
transition-delay：定义过渡效果何时开始。

animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。
animation-duration: s/ms 规定完成动画所花费的时间，以秒或毫秒计,默认0。
animation-timing-function: 规定动画的速度曲线,值可以为：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)，默认ease。
animation-delay: s/ms 规定在动画开始之前的延迟，默认0。
animation-iteration-count: n / infinite 规定动画应该播放的次数，默认1。
animation-direction: normal / alternate 规定是否需要轮流反向播放动画，默认normal。
@keyframes animationname {keyframes-selector {css-styles;}}
animationname: 动画名称
keyframes-selector： 动画时长的百分比，可以是0-100% 或from（与 0% 相同）和to（与 100% 相同）
css-styles： 一个或多个合法的 CSS 样式属性。如{top:0px; background:red; width:100px;}

js过渡事件钩子

事件名：

• before-enter


• enter


• after-enter



• enter-cancelled



• before-leave


• leave


• after-leave


• leave-cancelled

每个事件处理函数都有参数el,其中enter / leave处理函数还有参数done，它是一个函数参数。

methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {/*do something*/},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {/*do something*/ done()},
afterEnter: function (el) {},
enterCancelled: function (el) {/*do something*/},
// --------
// 离开时
// --------
beforeLeave: function (el) {/*do something*/},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {/*do something*/done()},
afterLeave: function (el) {/*do something*/},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {/*do something*/}
}

当需要在js事件钩子中定义元素过渡的css属性，但又避免style中定义css的影响，可以绑定v-bind:css=‘false‘，指明忽略style中CSS的应用。

过渡/动画在各种不同情形下的实现

初始渲染 appear

当对元素初始渲染时应用过渡或动画，可以使用单独提供的特性appear

// css类

.appear
.appear-active
.appear-to
// 自定义类名
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.8+)
appear-active-class="custom-appear-active-class"
>


// js事件钩子
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>



单个元素/单个组件的（v-if / v-show)

• 使用基本的css类或js事件的方式即可

多个元素时切换时（同一时间渲染多个节点中的一个）

• 相同标签元素的切换，设置key


• 为避免A元素的离开和B元素的进入同时发生，设置过渡模式mode=‘in-out / out-in‘

多个组件切换时（同一时间渲染多个节点中的一个）

• 尽量使用动态组件写法


• 仍然要设置过渡模式mode="out-in / in-out"

列表的过渡（同一时间渲染多个节点）

使用

• 同