vue中的动画效果与过渡效果

目录

一、动画效果

1、过程：

2、注意：

二、过渡效果

三、多个元素过度

四、第三方css库

---

动画与过渡效果添加的六个属性：

1、v-enter-active：进入的整个过程都能响应的样式

2、v-leave-active：离开的整个过程都能响应的样式

3、v-enter：进入的起点

4、v-leave：离开的起点

5、v-enter-on：进入的终点

6、v-leave-on：离开的终点

 

 

一、动画效果

1、过程：

①、首先使用transition标签包裹需要设置动画效果的标签；

②、使用@keyframes设置动画的效果，使用v-enter-active和v-leave-active设置动画的进场与退场；

2、注意：

①、transition标签与template标签类似，最后加载显示页面的时候会消失；

②、可以给transition标签设置name属性，通过name名-enter-active和name名-leave-active实现特定name名的特定样式；

③、可以给transition标签设置appear属性，实现初始化马上执行一次；