Vue3 过渡动画效果

Vue3 过渡动画效果

概述

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

• 会在一个元素或组件进入和离开 DOM 时应用动画。
• 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

组件

是一个内置组件，它可以将进入和离开应用到通过默认插槽传递给它的元素或组件上。

进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换

简单使用

• v-enter-from：进入动画的起始状态。
• v-enter-active：进入动画的生效状态。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
• v-enter-to：进入动画的结束状态。
• v-leave-from：离开动画的起始状态。
• v-leave-active：离开动画的生效状态。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
• v-leave-to：离开动画的结束状态。

为过渡效果命名

可以给 组件传一个 name prop 来声明一个过渡效果名：

自定义过渡class

可以向 传递以下的 props 来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

JavaScript动画效果

可以通过监听 组件事件的方式在过渡过程中挂上钩子函数。

添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。

对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

元素间过渡

除了通过 v-if / v-show 切换一个元素，我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可。

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop：

组件

是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

列表动画

状态动画