Vue过渡动画持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情https

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情juejin.cn/post/714765…

:duration""

作用：如果其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。在这种情况下，就可以用该属性定制一个显性的过度持续时间。

用法：
<Transition :duration="1000">...</Transition>

:duration="{}"

定制进入和移出的持续时间

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

用原生js钩子函数设置动画效果

在钩子函数与动画结合的时候，可以给<Transition>加v-bind:css="false"，就是告诉这个组件不要去找css动画了，直接用js动画。

<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>

上面代码中，v-on后面的事件名必须是固定的，""双引号里的函数名可以自定义，然后在对应的函数里进行动画设置。

appear属性：让组件初始渲染时，就有动画效果

给<Transition appear></Transition>添加appear，就是让组件保持进入时就是这个动画。

过度模式——mode属性

<Transition>组件默认离开和进入效果是同时发生的，大多数时候我们想要前一个完全离开之后，下一个再进入，那么就给<Transition>添加mode属性
值1、mode=“in-out” 新的先进，老的后出
值2、mode="out-in" 老的先出，新的后进

多个组件的过渡

用法：使用动态组件，动态组件<component/>被<Transition>组件包裹起来，给<Transition>添加相应的属性进行设置。

列表过渡

列表过渡不同于<transition>，它会以一个真实元素呈现：默认为一个 <span>，如果相同别的标记，那么就用tag属性进行修改。

<Transition-group tag="ul"></Transition>

使用列表过渡要注意以下几点：

要用transition-group组件包裹重复的标记
用不了mode属性，因为标记之间没有离开显示的效果
6个样式是给列表中重复渲染的标记使用的

Vue过渡动画