Aplikasi fungsi kesan peralihan penukaran halaman dalam dokumen Vue

Vue ialah rangka kerja JavaScript bahagian hadapan yang popular untuk membina aplikasi web dinamik dan interaktif. Dalam Vue, kesan peralihan adalah bahagian penting dalam penukaran halaman. Kesan peralihan penukaran halaman boleh menambah perasaan dinamik dan lancar pada penukaran halaman, dengan itu meningkatkan pengalaman pengguna. Terdapat pelbagai fungsi kesan peralihan yang disediakan dalam dokumentasi Vue Artikel ini akan memperkenalkan cara menggunakan fungsi ini dalam aplikasi Vue.

1. Nama kelas peralihan

Fungsi kesan peralihan dalam Vue dilaksanakan dengan menambahkan nama kelas tertentu pada atribut kelas elemen. Berikut ialah beberapa nama kelas peralihan biasa:

• v-enter: berkuat kuasa apabila elemen dimasukkan dan boleh menetapkan keadaan mula peralihan.
• v-enter-active: berkuat kuasa apabila elemen dimasukkan dan digunakan semasa proses peralihan Peranannya dalam peralihan atau animasi adalah untuk menentukan tempoh, masa tunda dan kesan animasi bagi kesan peralihan, dsb. .
• v-enter-to: berkuat kuasa apabila elemen dimasukkan, dan boleh menetapkan keadaan akhir peralihan.
• v-leave: berkuat kuasa apabila elemen dipadamkan dan boleh menetapkan keadaan permulaan peralihan.
• v-leave-active: berkuat kuasa apabila elemen dipadamkan, digunakan semasa proses peralihan.
• v-leave-to: berkuat kuasa apabila elemen dipadamkan dan boleh menetapkan keadaan tamat peralihan.

2. Fungsi peralihan

Vue menyediakan berbilang fungsi peralihan untuk memenuhi keperluan yang berbeza. Berikut ialah beberapa fungsi peralihan yang biasa digunakan:

• peralihan: Balut elemen atau komponen yang perlu dialihkan, dengan atribut nama menentukan awalan kelas statik.
• kumpulan peralihan: Membungkus senarai elemen atau komponen yang perlu dialihkan, dengan atribut nama menentukan awalan kelas statik.
• Fungsi peralihan dinamik: Dalam Vue, pengguna boleh menyesuaikan fungsi peralihan untuk mencapai kesan yang mereka inginkan. Anda boleh menghantar atribut nama dinamik kepada kumpulan peralihan atau peralihan, dan atribut nama ini boleh dikembalikan oleh fungsi.

3. Aplikasi Praktikal

Untuk lebih memahami aplikasi fungsi kesan peralihan Vue, di bawah kami akan mencipta aplikasi Vue mudah dan menggunakannya di dalamnya Peralihan fungsi kesan. Di sini kami menggunakan Vue CLI untuk mencipta projek Vue baharu. Mula-mula, laksanakan arahan berikut dalam terminal:

vue create my-app
cd my-app
npm run serve

Kemudian, kita boleh menambah kod berikut dalam fail App.vue:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="toggle">Toggle message</button>
    <transition name="fade">
      <p v-if="messageShown">Hello, Vue!</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Vue transition demo',
        messageShown: false,
      }
    },
    methods: {
      toggle() {
        this.messageShown = !this.messageShown;
      },
    },
  }
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease-in-out;
  }

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

Dalam kod di atas, kita mencipta butang dan A Komponen Vue untuk elemen perenggan. Apabila pengguna mengklik butang, jika elemen perenggan ditunjukkan, sembunyikannya, jika tidak tunjukkannya. Pada elemen perenggan, kami menggunakan komponen peralihan dan lulus pudar sebagai nilai atribut nama kepada komponen peralihan. Selain itu, kami juga mentakrifkan kelas .fade-enter-active, .fade-leave-active, .fade-enter dan .fade-leave-ke dalam teg gaya sebagai pelaksanaan rasmi fungsi kesan peralihan.

Akhir sekali, kami boleh pratonton aplikasi Vue kami dalam penyemak imbas. Apabila kami mengklik butang "Togol mesej", elemen perenggan akan hilang atau muncul dengan lancar, menggunakan fungsi kesan peralihan yang kami takrifkan.

Ringkasan

Vue menyediakan pelbagai fungsi kesan peralihan untuk mencapai kesan penukaran halaman yang dinamik dan lancar. Sebagai tambahan kepada fungsi peralihan dan kumpulan peralihan yang diperkenalkan di atas, Vue juga menyediakan lebih banyak fungsi kesan peralihan dan fungsi peralihan dinamik untuk memenuhi keperluan yang berbeza dengan lebih baik. Dalam proses menggunakan fungsi peralihan, gaya CSS bagi kesan peralihan perlu ditakrifkan dengan sewajarnya untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Aplikasi fungsi kesan peralihan penukaran halaman dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!