在
之前的文章《教你怎麼使用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中文網其他相關文章!