Perbincangan ringkas tentang v-for dalam Vue, nilai utama mempengaruhi kesan peralihan dan kesan animasi (penjelasan kod terperinci)

Dalam artikel sebelumnya "Ajar anda cara menggunakan Vue untuk mencapai kesan animasi (dengan kod) ", saya memperkenalkan anda cara menggunakan Vue untuk mencapai kesan animasi. Artikel berikut akan memberi anda pengenalan ringkas tentang kesan nilai utama dalam Vue pada kesan peralihan dan kesan animasi Rakan yang memerlukan saya harap ia akan membantu anda.

Mengenai perubahan susunan Vue.js dan v-for daripada key, ia mempengaruhi prestasi animasi peralihan

Mengenai Vue.js, nilai v-for mempengaruhi prestasi animasi peralihan Masalah ini timbul semasa menulis komponen key Mari kita lihat bahagian kod dahulu: Message

sub-komponen:

<!-- 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>

Komponen induk:

<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 为传入的随机不等值

Secara teorinya apabila komponen anak dialih keluar, ia akan mempunyai ketinggian yang lancar untuk mengalihkan animasi daripada

kepada 1 , tetapi sebaliknya, animasi itu hanya akan digunakan pada yang terakhir setiap kali apabila dialih keluar. Saya hairan, dan pelbagai pelaksanaan 0 dan js tidak begitu ideal. Masih tersepit satu demi satu. css

Pergi ke laman web rasmi dan baca dokumen itu sekali lagi. Terjumpa masalahnya. Apabila

merentasi, satu nilai adalah sangat penting: forApabila key mempunyai nilai key, setiap kali tatasusunan ditukar, Number akan dipaparkan semula, jadi animasi hanya akan mempengaruhi yang terakhir setiap kali. dom

Apabila nilai

ialah key, setiap kali tatasusunan ditukar, String lalai kepada strategi "penggunaan semula di tempat" dom

jadi tukar kunci Apabila String, saya mahu hasilnya dilaksanakan dengan lancar dan berurutan Contoh tapak web rasmi yang sempurna ialah https://cn.vuejs.org/v2/guide/list.html#key

Perlu diingatkan di sini bahawa nilai

ialah key/String, jadi untuk mengelakkan tidak berulang, nilai Number hendaklah secara rawak tidak berulang key/string, jangan gunakan number lalai. index

[Tamat]

Pembelajaran yang disyorkan:

Tutorial video JavaScript

Atas ialah kandungan terperinci Perbincangan ringkas tentang v-for dalam Vue, nilai utama mempengaruhi kesan peralihan dan kesan animasi (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!