Vue-2种设置过渡动画的方法

动画设置的6个阶段

过渡动画 transition：提供了6个css类：

• 1、v-enter：在元素插入之前生效

• 2、v-enter-active：在整个动画过程中生效

• 3、v-enter-to：定义过渡的结束状态

• 4、v-leave：在离开动画开始时生效

• 5、v-leave-active：在整个离开动画的过程中生效

• 6、v-leave-to：定义离开时过渡的结束状态

---

第一种方法 --- 自定义名称

默认类名v开头；
但可以自定义动画类名，在 transition 标签中通过 name 属性定义该类名；
使用的时候只需把默认的类名前缀 v 改成自定义的名字即可。

css

html

    按钮
    //---重点
        
{{msg}}
    

javascript

第二种方法 --- 引入动画库

enter-active-class="animated bounceInDown"

设置动画阶段-class="animated 动画库里的名称"

css-link

html

    按钮
    
    
    
        
        
你好!
    

javascript