該效果與上一例效果完全一致的，transition 元素可以使用 name 屬性來指定使用的類名前綴，從而代替 v-字段，例如事例中的 name="slide" 使本來的 v-enter 變成了 slide-enter。

3 transition 與 animation 同時使用時

  
    
  
  

  
    
  
  button

事例中，動畫同時指定了 transition 和 animation 動畫， transition 元素的 type 屬性可以指定以哪種動畫的時間為元素的結束時間，如果不指定動畫監(jiān)控的方式，則會以最長時間的為準。

4 javascript 監(jiān)聽動畫

  
    
  
  button

1. 一旦使用 js 事件，原 css 動畫過渡效果就會無效，官方推薦在

   上設置 v-bind:css="false" 可令 vue 內部機制免去監(jiān)測 css 動畫事件回調，提高性能。

2. enter 和 leave 事件需手動調用 done 方法，不然事件一直不會調用后續(xù)的 after 事件，沒有調用 after 事件但是又有其他事件開始了，則被視為動畫被 cancel 了。

5 頁面初始化時的動畫：

  
    
  
  button

1. appear 屬性表示開啟初始化動畫，appear-class 屬性指定初始化前的樣式，appear-active-class 屬性指定初始化動畫過程的樣式；

2. transition 動畫無法在初始化動畫中起效，而 animation 動畫則可以；

3. before-appear appear after-appear 是事件回調，看事例相當清晰。

6 動畫元素的 key ：

  
    
      on
      off
    
  
  
    
      on
      off
    
  

show1 為什么沒有動畫效果呢？因為 vue 會把切換中的兩個 button 識別成同一個元素，只是修改了 button 中的不同內容，所以實際上頁面并沒有發(fā)生 DOM 元素的切換；

如果要讓 vue 明確識別出這是2個不同的 button 元素，則為每個元素指定不同的 key 屬性的值。

7 元素切換的動畫模式：

  
    
      on
      off
    
  
  
    
      on
      off
    
  
  
    
      on
      off
    
  

1. transition 默認是同時執(zhí)行2個元素的切換動畫的，案例中紅色的 off 按鈕其實是會同時向左移動的，只是因為布局上沒有脫離布局流，被 on 按鈕頂住，無法移動；

2. mode="in-out" 可以使切換元素先執(zhí)行將要顯示元素的動畫，再執(zhí)行將要隱藏元素的動畫；

3. mode="out-in" 可以使切換元素先執(zhí)行將要隱藏元素的動畫，再執(zhí)行將要顯示元素的動畫；

8 多元素動畫：

  
    {{item}}
  
  
    {{item}}
  
  add

1. transition 里面只能放置單個元素或使用 v-if v-show 切換的單個元素，要想使用多個元素的動畫，必須使用 transition-group；

2. transition-group 默認會在 DOM 里渲染成 span 標簽，可使用 tag="ul" 指定渲染成其他標簽；

3. transition-group 必須為每一個子元素指定 key；

8 多元素的位移動畫：

  
    {{item}}
  
  reverse

1. transition-group 允許在每個元素移動時，添加 v-move 的樣式，移動完成后自動清除該樣式；

2. transition 的屬性， transition-group 都有，包括 name enter leave；

關于“vue元素如何實現(xiàn)動畫過渡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。