在
之前的文章《教你怎麼使用Vue實現動畫效果（附程式碼）》中，跟大家介紹怎麼使用Vue實現動畫效果。以下這篇文章給大家了解一下淺談Vue中key取值影響過渡效果和動畫效果，有需要的朋友可以參考一下，希望對你們有幫助。
關於Vue.js的v-for，key的順序改變，影響過渡動畫表現
關於Vue.js的v-for，key的取值，影響過渡動畫表現這個問題是在寫Message元件出現的，先看程式碼部分
<!-- 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 新增的时候自动加入定时器来移除
setTimeout(() => {
let index = 0 //这里假设我已经取得了移除的 index索引, 可能不是依次的123456
this.notices.splice(index, 1);
}, time) //time 为传入的随机不等值理論上當某一個子元件被移除時，他會有一個流暢的高度從1 到0到過度動畫，但是不然，每次移除時，動畫每次只會應用到最後一個。百思不解，各種js，css實作都不是很理想。依然一卡一卡的。
又去官網把文件翻了一遍。找出了問題所在。 for遍歷的時候，有一個值很重要：key當key取值為Number時，每次陣列都改變， dom會重新渲染，所以動畫每次只會影響最後一個。
當key取值為String時，每次陣列改變，dom則預設用「就地重複使用」策略
所以把key改為String時，則就是我想要當結果，流暢的依次性的執行了動畫，完美官網的例子https://cn.vuejs.org/v2/guide /list.html#key
這裡要注意的是，key的取值為String/Number#，所以測試時key值為了避免不重複，應該取值為隨機的不重複string/number, 不要使用預設的index 。
[完]
推薦學習：JavaScript影片教學
#以上是淺談Vue中v-for，key取值影響過渡效果與動畫效果（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
