vue中的动画特效

vue中css动画原理

在需要设置动画标签外部用包裹，可以添加name属性

1. 没有name属性，css 默认前缀是v，类名：

• 隐藏到显示：第一帧加载v-enter;v-enter-cative,第二帧将v-enter清除，添加v-enter-to,最后一帧将所有类名删掉
• 显示到隐藏：第一帧加载v-leave,v-leace-active,第二帧将v-leave清除，添加v-leave-to,最后一帧将所有类名删掉

2. 有name属性时，css前缀为name的属性值

• 通过在某一时刻，向div元素自动添加class的底层原理，vue实现动画

vue使用animate.css库

1. 引入animate.css
2. 在使用animate动画库时

<transition enter-active-class="animated XXX(库里的动画名)">;<;/transition>;

• 在transition标签中定义出场动画和离开动画
• enter-active-class=“animated 库动画名”
• enter-leave-class=“animated 库动画名”

在Vue中同时使用过渡和动画

1. 同时使用@keyframes动画和transition过渡
2. 初始动画 appear/appear-active-class
3. 可以使用type(animati