1. 单元素/组件的过渡transition

　　Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

实例：

      
     
    
                                     
       
        
show
       
    
          
      change
     

2. 过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

关于过渡类名：

　　如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。

　　如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter

3. 关于@keyframe 动画 （此处省略）

4. VUE中使用第三方animate.css 库,  （animate.css库提供的动画是@keyframe的Css3的动画） 

　　首先link引入animate.css，然后结合自定义过渡的类名  enter-active-class、leave-active-class，

　　animated是必须要写的，hinge shake是引入的动画效果

     
    
              
       
        show
       
    
          
      change
     

 5. 如何在页面加载完成后元素第一次显示时也具备动画效果？

　　使用appear 和 appear-active-class

     
    
          
       
        show
       
    
          
      change
     

 6. 同时使用过渡和动画

     
    
              
       
        
show
       
    
          
      change
     

 7. Vue中多个元素或组件的过渡

• 多个元素的过渡

先上例子：2个元素切换过渡效果

     
 
           
              
       
        hello vue
       
        
       
        Bye Vue
       
    
          
      change
     

• 多个组件的过渡

     
    
      
       
           
           
          
      change
     

 8. 列表过渡使用  transition-group

     
    
          
       
                {
    {item.title}}-{
    {item.id}}    
       
    
          
      Add