十二、vue 动画

一、Vue中的动画

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

二、使用过渡类名

 

v-enter：进入之前的时间点

v-enter-to：进入之后的时间点

v-enter-active：进入过程所用的时间段

v-leave：离开之前的时间点

v-leave-to：离开之后的时间点

v-leave-active：离开过程所用的时间段

通过图可以看到v-enter与v-leave-to的效果是一样的，v-leave与v-enter-to的效果是一样的。

显示与隐藏的过渡效果：

  
  
  
  
  
  
  



  

    
    
    
    
    
      
这是一个H3
    
  

  

 

三、修改前缀v

修改前缀这样就可以为不同的元素实现不同的动画特效了。

transition添加一个name属性就可以自定义css样式名字的前缀了，例如下面把css样式的名字前缀改为了my

      
这是一个H6

实例：

  
  
  
  
  
  
  



  

    
    
    
    
    
      
这是一个H3
    


    


    
    
      
这是一个H6
    
  

  

 

四、使用第三方 CSS 动画库

https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D

https://daneden.github.io/animate.css/
 

enter-active-class:定义入场时候的动画特效。

leave-active-class：定义离场时候的动画特效。

:duration：定义进场离场和离场要经过的时间。

:duration="{ enter: 200, leave: 400 }"：分别定义进场（enter）与离场（leave）要经过的时间。

 

实例：

  
  
  
  
  
  
  



  

    
    
	
    
	
	
    
    

    
    
      
这是一个H3
     
  

  

 

五、使用动画钩子函数

可以用来实现半场动画（只是出去不会回来）

官方文档：https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

入场钩子函数：

  v-on:before-enter="beforeEnter"进入之前
  v-on:enter="enter"进入
  v-on:after-enter="afterEnter"进入之后
  v-on:enter-cancelled="enterCancelled"进入取消

出场钩子函数：

  v-on:before-leave="beforeLeave"离开之前
  v-on:leave="leave"离开
  v-on:after-leave="afterLeave"离开之后
  v-on:leave-cancelled="leaveCancelled"离开取消

 

使用钩子函数模拟小球半场动画：

 

六、transition-group 实现列表动画

添加或移除时候列表的动画效果

  
  
  
  
  
  



  


    

      
        Id:
        
      

      
        Name:
        
      

      
    

    
      
      
      
      
      
        

          {{item.id}} --- {{item.name}}