TransitionGroup动画

上次编辑时间

Sep 27, 2024 08:00 AM

创建时间

Apr 23, 2024 09:23 AM

来源

在利用判断切换时，实现动画衔接。

我们只需要在 v-for 的外面包裹上 TransitionGroup 即可实现里面的数据在显示、添加、删除的时候进行交互动画

当我们写好 TransitionGroup之后，就开始写我们想要的动画了，首先我们先来看一张来自 Vue官方的图

首先 Enter 是进入的时候，在这个阶段我们知道有三个类名，分别是 v-enter-from（进入的起始状态）、v-enter-active（进入的过程），v-enter-to（进入的结束状态）；

其次就是 Leave 离开的时候，在这个阶段我们也知道有三个类名，分别是 v-leave-from（离开的起始状态）、v-leave-active（离开的过程）、v-leave-to（离开的结束状态）；

代码参考：

在这里我们不止可以使用 v 开发，还可以使用其他的，取决于TransitionGroup 组件是否传递 name，没有默认为 v 。

当一个文件里面有两个不同的，此时就可以使用 name。

例如：

那么接下来所以的 css 类名都需要以 data 开头，例如：

Orcatt