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

3 transition 與 animation 同時(shí)使用時(shí)

  
    
  
  

  
    
  
  button

事例中，動(dòng)畫(huà)同時(shí)指定了 transition 和 animation 動(dòng)畫(huà)， transition 元素的 type 屬性可以指定以哪種動(dòng)畫(huà)的時(shí)間為元素的結(jié)束時(shí)間，如果不指定動(dòng)畫(huà)監(jiān)控的方式，則會(huì)以最長(zhǎng)時(shí)間的為準(zhǔn)。

4 javascript 監(jiān)聽(tīng)動(dòng)畫(huà)

  
    
  
  button

1. 一旦使用 js 事件，原 css 動(dòng)畫(huà)過(guò)渡效果就會(huì)無(wú)效，官方推薦在

   上設(shè)置 v-bind:css="false" 可令 vue 內(nèi)部機(jī)制免去監(jiān)測(cè) css 動(dòng)畫(huà)事件回調(diào)，提高性能。

2. enter 和 leave 事件需手動(dòng)調(diào)用 done 方法，不然事件一直不會(huì)調(diào)用后續(xù)的 after 事件，沒(méi)有調(diào)用 after 事件但是又有其他事件開(kāi)始了，則被視為動(dòng)畫(huà)被 cancel 了。

5 頁(yè)面初始化時(shí)的動(dòng)畫(huà)：

  
    
  
  button

1. appear 屬性表示開(kāi)啟初始化動(dòng)畫(huà)，appear-class 屬性指定初始化前的樣式，appear-active-class 屬性指定初始化動(dòng)畫(huà)過(guò)程的樣式；

2. transition 動(dòng)畫(huà)無(wú)法在初始化動(dòng)畫(huà)中起效，而 animation 動(dòng)畫(huà)則可以；

3. before-appear appear after-appear 是事件回調(diào)，看事例相當(dāng)清晰。

6 動(dòng)畫(huà)元素的 key ：

  
    
      on
      off
    
  
  
    
      on
      off
    
  

show1 為什么沒(méi)有動(dòng)畫(huà)效果呢？因?yàn)?vue 會(huì)把切換中的兩個(gè) button 識(shí)別成同一個(gè)元素，只是修改了 button 中的不同內(nèi)容，所以實(shí)際上頁(yè)面并沒(méi)有發(fā)生 DOM 元素的切換；

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

7 元素切換的動(dòng)畫(huà)模式：

  
    
      on
      off
    
  
  
    
      on
      off
    
  
  
    
      on
      off
    
  

1. transition 默認(rèn)是同時(shí)執(zhí)行2個(gè)元素的切換動(dòng)畫(huà)的，案例中紅色的 off 按鈕其實(shí)是會(huì)同時(shí)向左移動(dòng)的，只是因?yàn)椴季稚蠜](méi)有脫離布局流，被 on 按鈕頂住，無(wú)法移動(dòng)；

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

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

8 多元素動(dòng)畫(huà)：

  
    {{item}}
  
  
    {{item}}
  
  add

1. transition 里面只能放置單個(gè)元素或使用 v-if v-show 切換的單個(gè)元素，要想使用多個(gè)元素的動(dòng)畫(huà)，必須使用 transition-group；

2. transition-group 默認(rèn)會(huì)在 DOM 里渲染成 span 標(biāo)簽，可使用 tag="ul" 指定渲染成其他標(biāo)簽；

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

8 多元素的位移動(dòng)畫(huà)：

  
    {{item}}
  
  reverse

1. transition-group 允許在每個(gè)元素移動(dòng)時(shí)，添加 v-move 的樣式，移動(dòng)完成后自動(dòng)清除該樣式；

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

以上就是“vue元素怎么實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。