Cara menggunakan komponen peralihan untuk mencapai kesan peralihan animasi dalam Vue

Vue ialah rangka kerja JavaScript popular yang mengandungi banyak komponen berguna untuk membantu pembangun membina aplikasi bahagian hadapan dengan lebih cekap. Antaranya, komponen peralihan Vue sendiri boleh digunakan untuk mencapai kesan peralihan animasi, yang boleh menjadikan interaksi aplikasi lebih lancar dan lebih jelas. Seterusnya, artikel ini akan memperkenalkan cara menggunakan komponen peralihan dalam Vue untuk mencapai kesan peralihan animasi.

1. Pengetahuan asas

Sebelum menggunakan komponen peralihan Vue, anda perlu memahami beberapa pengetahuan asas dalam Vue. Yang paling penting ialah fungsi cangkuk, yang merupakan fungsi dalam kitaran hayat komponen Vue yang dicetuskan semasa memaparkan dan mengemas kini komponen. Komponen peralihan boleh menggunakan fungsi cangkuk ini untuk mencapai kesan peralihan.

Perkara lain yang perlu diketahui ialah nama kelas peralihan CSS dalam Vue. Vue menyediakan beberapa nama kelas CSS yang melaluinya kesan peralihan animasi boleh ditetapkan. Namanya termasuk: v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active dan v-leave-to. Nama kelas ini sepadan dengan keadaan peralihan masuk dan keluar, dan gaya yang berkaitan boleh ditetapkan dalam CSS untuk mencapai kesan animasi.

2. Penggunaan asas

Sintaks asas untuk menggunakan komponen peralihan adalah sangat mudah. Mula-mula, tambahkan teg peralihan pada templat, kemudian bungkus elemen yang hendak dialihkan, dan kemudian tambah atau alih keluar elemen seperti yang diperlukan melalui arahan v-if atau v-show terbina dalam Vue.

Sebagai contoh, dalam kod berikut, kami membalut elemen div dalam teg peralihan dan menggunakan arahan v-if untuk mengawal elemen:

<template>
  <div>
    <transition>
      <div v-if="show">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

Dalam contoh di atas, kami mengikat A kaedah togol ditakrifkan pada butang Apabila butang diklik, nilai show akan terbalik, jadi elemen akan muncul atau hilang mengikut nilai show.

3. Penggunaan fungsi cangkuk

Walaupun contoh di atas menunjukkan penggunaan asas, ia tidak mencapai sebarang kesan animasi. Untuk mencapai kesan peralihan, anda perlu menggunakan beberapa fungsi cangkuk yang disediakan oleh Vue untuk mengawal keadaan peralihan yang berbeza.

Fungsi cangkuk ini termasuk: sebelum-masuk, masuk, selepas-masuk, masuk-dibatalkan, sebelum-cuti, cuti, selepas-cuti dan cuti-dibatalkan. Fungsi cangkuk ini akan dicetuskan pada masa yang berbeza apabila elemen masuk atau keluar Kita boleh menetapkan nama kelas peralihan CSS yang sepadan dalam fungsi cangkuk ini untuk mencetuskan kesan peralihan animasi.

Berikut ialah kesan peralihan mudah berdasarkan fungsi cangkuk:

<template>
  <div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled">
      <div :key="isShown">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShown: true
    }
  },
  methods: {
    toggle() {
      this.isShown = !this.isShown
    },
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 500 })
      done()
    },
    afterEnter(el) {
      el.style.opacity = ''
    },
    enterCancelled(el) {
      el.style.opacity = ''
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 500 })
      done()
    },
    afterLeave(el) {
      el.style.opacity = ''
    },
    leaveCancelled(el) {
      el.style.opacity = ''
    }
  }
}
</script>

<style>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}
</style>

Dalam kod di atas, kami mengikat satu siri fungsi cangkuk dan memperkenalkan perpustakaan Velocity.js untuk melengkapkan kesan animasi . Kami memproses elemen secara berbeza dalam fungsi cangkuk ini dan mencapai kesan peralihan yang kompleks dengan menetapkan kelas CSS yang berbeza.

Selain itu, kita perlu menambah beberapa gaya CSS pada helaian gaya untuk menetapkan kesan animasi peralihan yang berbeza. Dalam kod di atas, kesan animasi kecerunan ketelusan dicapai dengan menetapkan sifat kelegapan.

4. Kesimpulan

Artikel ini memperkenalkan penggunaan asas komponen peralihan dalam Vue dan penggunaan fungsi cangkuk Kami boleh menggunakan kaedah ini untuk mencapai kesan animasi yang kompleks dan menjadikan interaksi aplikasi lebih terang dan lancar. Perlu diingat bahawa pengalaman pengguna dan prestasi halaman mesti dipertimbangkan untuk kesan peralihan, dan masa peralihan tidak boleh terlalu lama untuk mengelakkan menjejaskan kelajuan pemuatan halaman.

Atas ialah kandungan terperinci Cara menggunakan komponen peralihan untuk mencapai kesan peralihan animasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!