vue中transition的属性及⽤法
<!-- 动态组件 -->
<transition name="fade"mode="out-in"appear>
<component :is="view"></component>
</transition>
1、⽤法：
transition 元素作为单个元素/组件的过渡效果。transition只会把过渡效果应⽤到其包裹的内容上，⽽不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
2、属性：
name - string，⽤于⾃动⽣成 CSS 过渡类名。例如：
transition用法搭配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 完成之后移除。这个类可以被⽤来定义过渡的过程时间，延迟和曲线函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。