之前的文章《教你怎么使用Vue實(shí)現(xiàn)動(dòng)畫效果（附代碼）》中，給大家介紹了怎么使用Vue實(shí)現(xiàn)動(dòng)畫效果。下面本篇文章給大家了解一下淺談Vue中key取值影響過(guò)渡效果和動(dòng)畫效果，有需要的朋友可以參考一下，希望對(duì)你們有幫助。

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

關(guān)于Vue.js的v-for，key的取值，影響過(guò)渡動(dòng)畫表現(xiàn)這個(gè)問(wèn)題是在寫Message組件出現(xiàn)的，先看代碼部分

子組件：

<!-- Notice： --> <transition :name="transitionName" @enter="enter" @leave="leave">   ...... .. </transition> <!-- JS: --> <script>   export default {     methods: {       enter(e) {         e.style.height = e.scrollHeight + "px";       },       leave(e) {         e.style.height = 0;       },     },   }; </script> <!-- CSS: --> <style>   transition: all 0.2s ease-in-out; </style>

父組件：

<notice v-for="(item, index) in notices" :key="index">   ...... </notice>

JS：

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

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

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

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

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

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

[完]

推薦學(xué)習(xí)：JavaScript視頻教程