Im vorherigen Artikel „Lernen Sie, wie Sie mit Vue Animationseffekte erzielen (mit Code)“ habe ich vorgestellt, wie Sie mit Vue Animationseffekte erzielen. Der folgende Artikel gibt Ihnen eine kurze Einführung in die Auswirkungen der Schlüsselwerte in Vue auf Übergangseffekte und Animationseffekte. Ich hoffe, dass er für Sie hilfreich ist.
Über Vue.js
s v-for
: Die Änderung der Reihenfolge von key
wirkt sich auf die Leistung der Übergangsanimation aus strong> 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
v-for
und key
von Vue.js
auf die Leistung der Übergangsanimation auswirken, Ich schreibe eine Nachricht. Wenn die
-Komponente erscheint, schauen Sie sich zuerst den Codeteil an
1
bis 0
zur Übergangsanimation, andernfalls wird die Animation bei jeder Entfernung jeweils nur auf die letzte angewendet. Ich bin verwirrt, alle Arten von js
-, css
-Implementierungen sind nicht sehr ideal. Steckt immer noch einer nach dem anderen fest. Wenn der Wert von key
String
ist, verwendet dom
jedes Mal, wenn das Array geändert wird, die Strategie der „direkten Wiederverwendung“. default🎜🎜 🎜Wenn ich also den Schlüssel in String ändere, möchte ich, dass das Ergebnis reibungslos und sequenziell ausgeführt wird. Ein Beispiel von der perfekten offiziellen Website https://cn.vuejs.org/v2/guide/list.html#key 🎜 🎜🎜Hier ist zu beachten, dass der Wert von key
String
/Number
ist, also der Wert von key
während des Tests Um eine Nichtduplizierung zu vermeiden, sollte der Wert eine zufällige, nicht duplizierte Zeichenfolge
/Nummer
sein und nicht den Standard-Index verwenden. Code>. 🎜🎜[Ende]🎜🎜Empfohlenes Lernen: 🎜JavaScript-Video-Tutorial🎜🎜
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über v-for in Vue: Der Schlüsselwert beeinflusst den Übergangseffekt und den Animationseffekt (detaillierte Codeerklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!