Vue83-动画与过渡效果

一、动画效果

1-1、默认过渡（没有名字） 

关注点：控制isShow即可！动画的播放效果由vue负责。

谁想要动画效果，就让<transition>包裹谁！

vue在解析的时候，不会生成<transition>元素。

 

1-2、添加命名

当有多个元素需要动画效果，且动画效果不同的时候，可以用name属性做区分。

1-3、页面一上来就有动画

或者：

二、过渡效果

2-1、单个元素

优化1：

 

优化2：

• 一个元素奔我们而来的时候，vue加了三个样式的类型：v-enter、v-enter-active、v-enter-to；
• 一个元素离我们而去的时候，vue加了三个样式的类型：v-leave、v-leave-active、v-leave-to；

2-2、多个元素

或者：

三、第三方动画库推荐

 

 

 

四、小结