TransitionGroup 使用

前言

首先说说 TransitionGrounp 是什么，TransitionGrounp 是 Vue 官方推出的一个内置组件，用于对 v-for 列表中的元素或组件的插入，移除和顺序改变添加动画效果；为什么要添加动画效果呢，我们来看一下下面两组的对比，那个交互感更好一些

我们明显可以看到第一组比第二组看起来舒服很多，第一组无论是最初的显示，还是后面的添加数据，又或者是后来的删除数据，我们明显可以看到交互感；但是第二组就显得很死板，因此我们在开发中对于数据的新增删除有时候需要用到 TransitionGroup，这样会让我们得界面看起来交互感更舒服一些。

使用

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

<TransitionGroup>
    <div v-for="item in list" :key="item.id">
        <span>姓名：{{item.name}}</span>
        <span>年龄：{{item.age}}</span>
        <span @click="del(item.id)">删除</span>
    </div>
</TransitionGroup>

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

首先 Enter 是进入的时候，在这个阶段我们知道有三个类名，分别是 v-enter-from（进入的起始状态）、v-enter-active（进入的过程），v-enter-to（进入的结束状态）；
其次就是 Leave 离开的时候，在这个阶段我们也知道有三个类名，分别是 v-leave-from（离开的起始状态）、v-leave-active（离开的过程）、v-leave-to（离开的结束状态）；
到这里你应该就知道了这些类名是什么意思了吧，那么我们上方也看到了第一组的展示交互，那么我们就来看看它的代码是如何写的

.v-move,
.v-enter-active,
.v-leave-active {
    transition: all 0.5s ease;
}

.v-enter-from {
    transform: scale(0);
    opacity: 0;
}

.v-enter-to {
    transform: scale(1);
    opacity: 1;
}

.v-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

.v-leave-active {
    position: absolute;
}

首先我们先看所知道的，v-enter-active 和 v-leave-active 在这里设置了一个0.5秒的过渡，证明在进入的过程和离开的过程我们需要有一个0.5秒的动画；
v-enter-from 我们也知道，是进入的起始状态，这里设置的是透明度为0，同时是缩放至0，也就是不显示；v-enter-to 是进入之后，这个时候缩放是1，也就是自身不变，同时透明度为1，我们知道，进入的时候是透明度为0，缩放至0，进入之后是透明度为1，缩放为1，那么我们还知道我们在进入的过程设置了一个0.5秒的过度，那么我们就可以看到在进入的时候满满变大并且显示的效果，到这里是不是就知道了如何实现的，同时还设置了 v-leave-to 离开之后向右移动自身的宽度的距离，并且透明度变成0，这里我们没有设置离开之间，那么默认就是进入之后的样子，这样是不是就恍然大悟了；
至于 v-leave-active 加了一个定位以及 v-move 是干什么的，我们也知道，在删除第一个元素的时候剩下元素会自行向上进行补位，就是通过这两个实现的；
在这里我们不止可以使用 v 开发，还可以使用其他的，这个主要取决于你自身给 TransitionGroup 组件是否传递 name，如果没有默认为 v，当一个文件里面有两个不同的，此时就可以使用 name，例如：

<TransitionGroup name="data">
    <div v-for="item in list" :key="item.id">
        <span>姓名：{{item.name}}</span>
        <span>年龄：{{item.age}}</span>
        <span @click="del(item.id)">删除</span>
    </div>
</TransitionGroup>

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

.data-move,
.data-enter-active,
.data-leave-active {
    transition: all 0.5s ease;
}

.data-enter-from {
    transform: scale(0);
    opacity: 0;
}

.data-enter-to {
    transform: scale(1);
    opacity: 1;
}

.data-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

.data-leave-active {
    position: absolute;
}

小结

到这里你就知道了第一组图片的动画是如何实现的，为什么我们要在开发中使用这个，因为很长的一段时间里，自己也是按照第二种方式一直做项目，后来做多之后就慢慢的想让这个项目灵动性更高，便去学此知识，因此写下了这一篇文章，与各位前端小伙伴一起分享自己的心得，之所以想让这个项目交互性更好一些是因为自己热爱这个项目，热爱这一份前端工作，也希望自己能把这个东西做到最完美，这篇文章只是告诉大家 TransitionGroup 是什么，怎么使用，更多的动画效果大家可以自行去研究，也希望我们都可以将自己所负责的项目做成自己满意的样子，如果感觉写的还不错可以来一个点赞收藏和关注，也可以在下方评论区进行技术的探讨互动。