Cara menggunakan nama kelas peralihan untuk mencapai kesan peralihan animasi dalam Vue

Vue ialah rangka kerja JavaScript popular yang direka untuk memudahkan pembangunan aplikasi web. Antaranya, nama kelas peralihan adalah ciri yang sangat penting, yang membolehkan kami mencapai kesan animasi peralihan dalam penambahan, penyingkiran dan gelagat lain elemen DOM. Dalam artikel ini, kami akan mempelajari cara menggunakan nama kelas peralihan dalam Vue untuk membawa pengalaman animasi yang lebih kaya kepada aplikasi web kami.

Apakah nama kelas peralihan Vue?

Nama kelas peralihan dalam Vue ialah satu set nama kelas CSS yang ditakrifkan dalam pustaka Vue. Nama kelas ini menyediakan beberapa kesan animasi peralihan CSS yang dipratentukan, seperti fade in, fade out, zum masuk, zum keluar, dsb. Dalam nama kelas peralihan Vue, kita boleh menggunakan kata kunci berikut:

• v-enter: keadaan awal sebelum elemen DOM dimasukkan.
• v-enter-active: Proses pelaksanaan animasi selepas elemen DOM dimasukkan.
• v-enter-to: Keadaan penamatan selepas elemen DOM dimasukkan.
• v-leave: Keadaan awal elemen DOM sebelum ia dialih keluar.
• v-leave-active: Proses pelaksanaan animasi selepas elemen DOM dialih keluar.
• v-leave-to: Keadaan penamatan selepas elemen DOM dialih keluar.

Nama kelas ini memudahkan untuk menambah dan mengalih keluar kesan animasi pada elemen DOM, terutamanya dalam senarai Vue dan pemaparan bersyarat.

Cara menggunakan nama kelas peralihan Vue

Dalam Vue, kami boleh menambah nama kelas peralihan kepada elemen dengan mudah melalui arahan v-bind dan arahan v-on. Di bawah ini kami akan memperkenalkan cara menggunakan kedua-dua arahan ini dalam Vue.

Gunakan arahan v-bind untuk menambah nama kelas peralihan

Menggunakan arahan v-bind, kita boleh mengikat objek pada elemen dan menambah nama kelas peralihan melalui objek. Untuk mencapai kesan peralihan, kita perlu menambah atribut utama pada elemen, yang sepatutnya unik supaya Vue boleh menjejaki keadaan elemen. Contohnya, kod berikut:

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="message">Hello World!</p>
    </transition>
    <button v-on:click="toggleShow">Toggle</button>
  </div>
</template>

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

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

Dalam kod di atas, kami menggunakan komponen peralihan Vue untuk mendayakan kesan peralihan. Dalam komponen peralihan, kami mentakrifkan peralihan bernama "fade" supaya kami boleh menggunakan .fade-enter, .fade-enter-active, .fade-enter-to, .fade-leave, .fade dalam CSS -leave-active , .fade-leave-kepada nama kelas ini. Kami menggunakan arahan v-jika pada elemen p untuk mengawal sama ada ia muncul, dan menggunakan atribut utama untuk menjejaki statusnya. Dalam CSS, kami mentakrifkan dua nama kelas fade-enter-active dan fade-leave-active, yang digunakan untuk menetapkan masa pelaksanaan animasi peralihan. Fungsi fade-enter dan fade-leave-to adalah untuk menentukan keadaan permulaan dan penamat elemen apabila memasukkan dan mengeluarkan masing-masing.

Gunakan arahan v-on untuk menambah nama kelas peralihan

Menggunakan arahan v-on, kita boleh menambah nama kelas peralihan kepada elemen melalui pendengaran acara. Contohnya, kod berikut:

<template>
  <div>
    <transition name="scale">
      <button v-if="visible" v-on:click="hide">Hide</button>
    </transition>
    <button v-else v-on:click="show">Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
}
</script>

<style>
.scale-enter-active, .scale-leave-active {
  transition: transform .5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}
</style>

Dalam kod di atas, kami menggunakan arahan v-on untuk mengikat acara klik untuk menunjukkan atau menyembunyikan butang. Apabila butang dipaparkan, kami menggunakan komponen peralihan Vue untuk menambah kesan peralihan bernama "skala" padanya. Dalam CSS, kami mentakrifkan dua nama kelas: .scale-enter-active dan .scale-leave-active, yang digunakan untuk mengawal masa pelaksanaan animasi peralihan. Kami juga mentakrifkan dua nama kelas: .scale-enter dan .scale-leave-to, yang digunakan untuk menentukan keadaan permulaan dan akhir elemen apabila ia dimasukkan dan dialih keluar.

Ringkasan

Nama kelas peralihan Vue menyediakan cara yang mudah dan berkuasa untuk mencapai kesan animasi peralihan unsur DOM. Kita boleh menggunakan arahan v-bind dan v-on untuk mengikat nama kelas ini kepada elemen dan mengawal kesan peralihan unsur melalui CSS. Jika anda tidak biasa dengan nama kelas peralihan dan kesan animasi Vue, adalah disyorkan agar anda melakukan lebih banyak latihan dan eksperimen supaya anda boleh menguasai nama kelas peralihan Vue dengan lebih baik.

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