vue transition的理解

最近开发的过程中用到了vue的transition组件，写一下自己的心得体会。

transition的作用

首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。

transition的属性

1. v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);
2. v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;
3. v-enter-to：元素显示/插入后的效果，例如：transform: translateX(-100%);
4. v-leave：元素隐藏/移除前的效果，例如：transform: translateX(0);
5. v-active-leave：元素隐藏/移除的过渡时间和函数，例如：transition: all 0.3s ease;
6. v-leave-to：元素隐藏/移除后的效果，例如：transform: translateX(100%);

 transition动画的实现是依靠css进行控制的，一般而言v-active-enter和v-active-leave的样式是一样的，因为这两个是定义过渡的状态，例如过渡的曲线、时间。
如果页面有多个transition的话可以通过修改name属性，分别给不同的transition添加变幻样式。

案例：

 上例的效果如下：

 这里的案例省略了很多代码，但效果是相同的。

由这里我们可以使用transition组件进行页面切换添加动画：

即使用下面的方式进行切换：

详细案例请查看：https://blog.csdn.net/qq_41756580/article/details/106275305

注意：

transition内部如果包裹的多个相同tag(标签)的元素时，需要给每个标签添加不同的key用以区别。否则的话动画不会生效。