Vue の v-for についての簡単な説明、キー値はトランジション効果とアニメーション効果に影響します (詳細なコードの説明)

前回の記事「Vueを使ってアニメーション効果を実現する方法を教えます(コード付き)」では、Vueを使ってアニメーション効果を実現する方法を紹介しました。以下の記事では、Vue のキー値がトランジション効果やアニメーション効果に与える影響について簡単に紹介しますので、困っている方は参考にしていただければ幸いです。

Vue.jsv-for,key について 順序変更はトランジション アニメーションのパフォーマンスに影響します

Vue.jsv-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 実装はあまり理想的ではありません。それでも次々と引っかかる。

公式 Web サイトにアクセスしてドキュメントをもう一度読んでください。問題が見つかりました。 forトラバースするとき、1 つの値が非常に重要です: keykey の値が Number の場合、配列が変更されるたびに、 dom は再レンダリングされるため、アニメーションは毎回最後のアニメーションにのみ影響します。

key 値が String の場合、配列が変更されるたびに、dom はデフォルトで「インプレース再利用」戦略を使用します

そのため、キーを String に変更したときに、結果がスムーズかつ順番に実行されるようにしたいと考えています。完璧な公式 Web サイトの例は、https://cn.vuejs.org/v2/guide / です。 list.html#key

ここで、key の値は String/Number であることに注意してください。重複を避けるために、key 値は重複しないランダムな string/number にする必要があり、デフォルトの index は使用しないでください。 。

[終了]

推奨学習: JavaScript ビデオ チュートリアル

以上がVue の v-for についての簡単な説明、キー値はトランジション効果とアニメーション効果に影響します (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。