vue中transition的属性及用法

<transition name="fade" mode="out-in" appear>
  <component :is="view">component>
transition>

1、用法：

transition 元素作为单个元素/组件的过渡效果。transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

2、属性：

• name - string，用于自动生成 CSS 过渡类名。例如：

name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”

• appear - boolean，是否在初始渲染时使用过渡。默认为 false。
• mode - string，控制离开/进入过渡的时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时进行。
• duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

mode的“out-in”和“in-out”代表的意思

• out-in：在前一个组件离开之后下一个组件开始进入
• in-out：下一个组件进入，前一个组件才离开

3、name属性的具体意义

比如 name：fade

• fade-enter: 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除，即初始状态
• fade-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• fade-enter-active: 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• fade-leave: 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
• fade–leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
• fade-leave-active: 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

参考：https://blog.csdn.net/qq_35656123/article/details/100709139