Bagaimana untuk beralih dalam vue

Melaksanakan lompatan halaman dalam Vue ialah salah satu keperluan biasa dalam pembangunan bahagian hadapan Ia juga merupakan pilihan yang baik untuk melaksanakan kesan peralihan semasa lompatan halaman untuk meningkatkan pengalaman pengguna.

Vue menyediakan pelbagai cara untuk mencapai kesan peralihan halaman, yang akan diperkenalkan satu demi satu seterusnya.

1. Animasi Vue

Animasi Vue ialah API yang disediakan secara rasmi oleh Vue, yang digunakan untuk melaksanakan kesan peralihan dalam komponen Vue. Animasi Vue perlu dilaksanakan melalui mekanisme peralihan Vue Fungsi cangkuk mekanisme peralihan menyediakan kaedah yang berbeza untuk mengawal kesan peralihan, seperti:

• sebelum masuk (sebelum masuk): sebelum elemen dimasukkan. ke dalam perubahan
• masuk (masuk): keadaan apabila elemen dimasukkan (startState)
• selepas-masuk (selepas masuk): keadaan selepas proses memasukkan elemen selesai (endState)
• masuk-dibatalkan: Cangkuk ini akan dipanggil jika penyertaan dibatalkan.

Berikut ialah contoh kod yang menggunakan animasi Vue untuk mencapai kesan peralihan:

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

Dalam contoh ini, animasi dengan nama yang sama dengan "fade" diikat pada penghala - Dalam paparan, untuk menunjukkan kesan peralihan, apabila halaman baharu masuk, ia akan mempunyai kesan kecerunan Kelegapan akan meningkat secara beransur-ansur dari 0 kepada 1 Begitu juga, apabila meninggalkan halaman lama, akan ada Kesan kecerunan Kelegapan akan meningkat dari semasa ke semasa.

2. Pelaksanaan perpustakaan pihak ketiga

Kesan peralihan Vue juga boleh dilaksanakan melalui perpustakaan pihak ketiga, antaranya yang lebih popular adalah yang berikut:

• kumpulan peralihan: digunakan apabila setiap komponen disambungkan
• vue-router-transition: digunakan untuk senario penukaran halaman
• animated-vue: digunakan untuk berbilang kesan Peralihan adegan lain

kumpulan peralihan

kumpulan peralihan boleh mencapai kesan peralihan animasi antara komponen seperti senarai dan grid dengan mudah.

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

Dalam contoh ini, elemen span digelung dan ditambah pada kumpulan peralihan, setiap elemen mempunyai set atribut utama. Mereka semua mempunyai item senarai nama kelas yang sama. kumpulan peralihan akan menambah dan mengalih keluar elemen ini secara dinamik untuk mencapai kesan peralihan.

vue-router-transition

vue-router-transition digunakan untuk melaksanakan kesan peralihan halaman dalam Vue Router. Untuk menggunakan vue-router-transition, anda hanya perlu menambah nama kelas v-enter dan v-leave pada komponen penghalaan Vue Router. Kita boleh menggunakan CSS untuk menentukan gaya ini untuk mencapai kesan peralihan.

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

// fade 动画实现方式同上

Dalam contoh ini, apabila dua halaman bertukar, halaman baharu akan disembunyikan dahulu dan diletakkan di atas halaman lama, dan kemudian menggunakan animasi CSS untuk mencapai kesan peralihan masuk dan keluar.

animated-vue

animated-vue ialah pustaka lain yang digunakan untuk melaksanakan kesan peralihan Vue Ia menyediakan berbilang jenis animasi (masuk, keluar, pop timbul, dll. ) untuk membuat halaman kami peralihan lebih kaya.

<transition appear :css="false"
  v-bind:enter-active-class="'animated fadeIn'"
  v-bind:leave-active-class="'animated fadeOut'"
  >
  <router-view></router-view>
</transition>

Dalam contoh ini kami menggunakan perpustakaan CSS yang dipanggil "animasi" yang menyediakan beberapa animasi CSS yang berbeza. Kami boleh menggunakan perpustakaan ini dengan mekanisme peralihan Vue untuk mencapai kesan peralihan halaman yang menarik.

Ringkasan

Melaksanakan kesan peralihan dalam Vue bukan sahaja boleh membawa pengalaman yang lebih baik kepada pengguna, tetapi juga meningkatkan interaktiviti dan estetika halaman. Vue menyediakan pelbagai API terbina dalam dan perpustakaan pihak ketiga untuk mencapai kesan peralihan, dan kami boleh memilih mengikut keperluan dan senario yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk beralih dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!