這篇文章主要講解了“Vue中key取值會影響過渡效果和動畫效果嗎”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中key取值會影響過渡效果和動畫效果嗎”吧！

成都創(chuàng)新互聯(lián)公司從2013年成立，先為唐縣等服務(wù)建站，唐縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為唐縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

關(guān)于Vue.js的v-for，key的順序改變，影響過渡動畫表現(xiàn)

關(guān)于Vue.js的v-for，key的取值，影響過渡動畫表現(xiàn)這個問題是在寫Message組件出現(xiàn)的

子組件：

  ...... ..

父組件：

  ......

JS：

data() {
    return {
      notices: []
    };
  },
  //notices 新增的時候自動加入定時器來移除
  setTimeout(() => {
    let index = 0 //這里假設(shè)我已經(jīng)取得了移除的 index索引, 可能不是依次的123456
    this.notices.splice(index, 1);
  }, time) //time 為傳入的隨機(jī)不等值

理論上當(dāng)某一個子組件被移除時，他會有一個流暢的高度從 1 到 0 到過度動畫，但是不然，每次移除時，動畫每次只會應(yīng)用到最后一個。百思不解，各種js，css實現(xiàn)都不是很理想。依然一卡一卡的。

又去官網(wǎng)把文檔翻了一遍。 找出了問題所在。for遍歷的時候，有一個值很重要：key當(dāng)key取值為Number時，每次數(shù)組被改變，dom會重新渲染，所以動畫每次只會影響最后一個。

當(dāng)key取值為String時，每次數(shù)組被改變，dom則默認(rèn)用“就地復(fù)用”策略

所以把key改為String時，則就是我想要當(dāng)結(jié)果，流暢的依次性的執(zhí)行了動畫，完美官網(wǎng)的例子https://cn.vuejs.org/v2/guide/list.html#key

這里需要注意的是，key的取值為String／Number，所以測試時key值為了避免不重復(fù)，應(yīng)該取值為隨機(jī)的不重復(fù)string/number, 不要使用默認(rèn)的index 。

感謝各位的閱讀，以上就是“Vue中key取值會影響過渡效果和動畫效果嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue中key取值會影響過渡效果和動畫效果嗎這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！