Eine kurze Diskussion über v-for in Vue: Der Schlüsselwert beeinflusst den Übergangseffekt und den Animationseffekt (detaillierte Codeerklärung).

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.jss 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

In Bezug auf die Frage, wie sich die Werte von 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

Untergeordnete Komponente:

rrreee

Übergeordnete Komponente:

rrreee

JS:

rrreeeWenn eine untergeordnete Komponente entfernt wird, hat sie theoretisch eine gleichmäßige Höhe von 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.

Gehen Sie zur offiziellen Website und lesen Sie das Dokument noch einmal. Habe das Problem gefunden. Wenn for durchlaufen wird, ist ein Wert sehr wichtig: key Wenn der Wert von key jedes Mal Number ist die Zahl Wenn die Gruppe geändert wird, wird dom neu gerendert, sodass die Animation jeweils nur die letzte betrifft.

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!