Analisis contoh aplikasi fungsi peralihan tersuai dalam dokumen Vue

Fungsi peralihan tersuai Vue digunakan untuk mengawal gelagat khusus kesan peralihan apabila elemen dimasukkan, dikemas kini dan dipadamkan. Fungsi ini menerima objek parameter, termasuk elemen yang akan dialihkan, nama kelas peralihan dan fungsi panggil balik untuk melengkapkan peralihan.

Dalam Vue, kesan peralihan boleh dicapai melalui nama kelas CSS. Apabila Vue mengendalikan kesan peralihan, ia akan menambah nama kelas peralihan kepada elemen dalam susunan tertentu, dengan itu mencetuskan kesan animasi. Sebagai contoh, nama kelas "v-enter" dan "v-enter-active" ditambah apabila elemen dimasukkan dan dialih keluar selepas elemen dimasukkan.

Walau bagaimanapun, kesan peralihan lalai Vue agak membosankan dan sukar untuk memenuhi keperluan pelbagai senario. Pada ketika ini, kita boleh menggunakan fungsi peralihan tersuai yang disediakan dalam Vue untuk mencapai kesan peralihan yang lebih bebas dan fleksibel.

Di bawah, kami menggunakan contoh untuk memperkenalkan penggunaan fungsi peralihan tersuai secara terperinci.

Contoh fungsi peralihan tersuai

Kami mengambil komponen karusel imej sebagai contoh untuk menunjukkan cara menggunakan Vue untuk menyesuaikan fungsi peralihan. Komponen ini boleh merealisasikan karusel automatik dan menukar gambar secara manual. Kami akan menggunakan fungsi peralihan tersuai untuk mencapai kesan peralihan imej.

Templat komponen

Pertama, kami mentakrifkan templat komponen karusel, yang mengandungi imej paparan dan butang untuk menukar imej secara manual:

<template>
  <div class="carousel">
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <img :src="currentImg" key="currentImg" class="image" />
    </transition>
    <div class="button-group">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

Data dan fungsi komponen

Seterusnya, kami mentakrifkan data, sifat yang dikira dan kaedah komponen:

<script>
export default {
  data() {
    return {
      imgs: [
        "https://placekitten.com/g/300/200",
        "https://placekitten.com/g/300/210",
        "https://placekitten.com/g/300/220"
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex];
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.imgs.length) % this.imgs.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const delay = el.dataset.index * 1000;
      setTimeout(() => {
        el.style.transition = "opacity 1s";
        el.style.opacity = 1;
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = "opacity 1s";
      el.style.opacity = 0;
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

Antaranya, tatasusunan imgs mengandungi semua pautan imej yang perlu diputar dan currentIndex mewakili indeks imej yang sedang dipaparkan . Fungsi currentImg mengembalikan pautan ke imej semasa.

kaedah sebelum dan seterusnya digunakan untuk menukar imej secara manual. beforeEnter, enter dan leave adalah fungsi peralihan tersuai, sepadan dengan kesan peralihan semasa pemasukan elemen, kemas kini dan pemadaman masing-masing.

Dalam fungsi peralihan masuk, kami menggunakan setTimeout untuk mencapai kesan memaparkan setiap gambar pada titik masa yang berbeza. Dalam fungsi peralihan cuti, kami menggunakan fungsi kelewatan untuk menunggu kesan animasi selesai sebelum memusnahkan nod elemen.

Ringkasan

Melalui contoh di atas, kita dapat melihat bahawa dalam fungsi peralihan tersuai Vue, kita boleh mengawal pelaksanaan khusus kesan peralihan dengan menghantar parameter el. Dalam pembangunan sebenar, kita boleh menyesuaikan fungsi peralihan yang berbeza mengikut keperluan khusus untuk mencapai kesan peralihan yang lebih fleksibel dan bebas.

Akhir sekali, perlu diingat bahawa fungsi peralihan tersuai Vue mesti dilaksanakan sebelum nama kelas peralihan ditambahkan pada elemen, jika tidak, tiada kesan peralihan akan dicetuskan.

Atas ialah kandungan terperinci Analisis contoh aplikasi fungsi peralihan tersuai dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!