Vue 关于过渡的使用场景

vue

*本文只是将官网的内容进行简单的整理，可点击查看实例查看官网具体描述及源码实例。

当从 DOM 中插入、更新或移除项目时，Vue 提供多种应用过渡效果的方式。具体可以分为以下三类：单元素/组件件的过渡、多元素间的切换过渡、多组件间的切换过渡。

1. 单元素/组件间的过渡

定义：任何组件/元素添加进入/离开过渡

方式：css过渡、css动画、js钩子函数--（使用v-if、v-show达到效果）

css过渡和css动画都是增加或者删除css过渡clas，唯一的区别是v-enter在元素插入dom后并不会立即删除，会在动画触发时删除。

过渡类型有6种：v-enter，v-enter-active、v-enter-to， v-leave，v-leave-active， v-leave-to。其存在周期如下图所示：

js钩子函数有：before-enter, enter,after-enter, before-cancelled、before-leave、leave、after-leave、leave-cancelled

2. 多元素间的切换过渡

定义：多个元素间进行切换显示，添加key元素至关重要

方式：依然可以使用v-if、v-show，或者在js中进行switch/case之类的筛选

3. 多组件间的切换过渡

定义：动态切换组件，不需要key属性

方式：<component v-bind:is="view"></component> view字段标注使用组件的名称

4. 列表过渡

定义：列表的每一项都需要进行过渡

方式：<transition-group></transition-group>默认渲染成span，也可以通过tag标签修改

注意事项：

1. <transition></transition>不会以真实的元素渲染，<transiton-group></transition-group>会默认渲染成span

2. JavaScript 式过渡的时候，在 enter 和 leave 钩子函数中，必须有 done 回调函数。否则，这两个钩子函数会被同步调用，过渡会立即完成