vue transition 过渡

transition 的使用

props:

1.name 过渡名，会自动生成拓展的过渡的class名

2.过渡class:enter-class,leave-class,enter-active-class,leave-active-class,appear-class,appear-active-class,

(也可以使用 过渡名-[enter|leave|enter-active....] 在css 直接各个状态的样式)

3.appear -boolean 是否在初始渲染使用过渡

4.css-boolean 是否使用css过渡

5.type [transition|animation] 自动检测

6.mode  [out-in|in-out]控制离开/进入的过渡时间序列

event：

1.before--enter

2.enter

3.after-enter

4.before-leave

5.leave

6.after-leave

7.before-appear

8.appear

9.after-appear

ps:

appear -class 需要 先使用 prop appear

<transition

appear

appear-class= "...."

appear-active-class= "...."

>

vue为了知道过渡完成，会自动识别transitionend or  animationend,在同时使用两个方式时，需要 使用type 申明监听类型

可以结合第三方的过渡动画使用，下面例子，我使用的是animation.css的动画效果

 
        

             
                Toggle
              
              
                
hello
              
        

    
    

注意：

对相同的元素切换时，需要在元素 使用prop key来标记唯一值，

与可以配合使用