Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk mencapai penukaran halaman dalam Vue

Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk melaksanakan penukaran halaman dalam Vue

Dalam aplikasi web, penukaran halaman ialah tingkah laku interaktif yang sangat penting yang boleh membantu pengguna memahami struktur dan fungsi aplikasi. Walau bagaimanapun, jika kelajuan penukaran terlalu pantas, pengguna mungkin berasa keliru dan kecewa Jika tiada kesan peralihan, penukaran halaman juga akan kelihatan kaku dan tidak wajar. Untuk meningkatkan pengalaman pengguna, kami boleh menggunakan kesan peralihan untuk menukar halaman dalam Vue Artikel ini akan menerangkan teknik dan amalan terbaik untuk menggunakan kesan peralihan.

Kesan peralihan dalam Vue dicapai dengan menambah/mengalih keluar kelas CSS apabila elemen masuk dan keluar Kelas ini boleh menggunakan gaya CSS tersuai untuk mencapai pelbagai kesan peralihan seperti kesan penyedutan atau pop timbul, kesan ubah bentuk, perubahan warna, dsb. Vue menyediakan dua cara untuk menggunakan kesan peralihan: melalui peralihan komponen dan sifat animasi, dan melalui komponen peralihan terbina dalam.

1. Melalui peralihan komponen dan sifat bernyawa

Dalam komponen Vue, anda boleh menggunakan sifat peralihan dan animasi untuk menambah kesan peralihan. Atribut peralihan digunakan untuk menambah kesan peralihan apabila elemen masuk atau keluar, manakala atribut animasi digunakan untuk menambah kesan peralihan apabila elemen dikekalkan. Di sini, kami menggunakan kesan penukaran halaman mudah untuk menunjukkan cara menggunakan sifat peralihan dan animasi.

Pertama, kita perlu menambah dua elemen peralihan pada templat komponen Vue dan mentakrifkan atribut nama mereka. Contohnya:

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

<transition name="page-slide">
  <router-view></router-view>
</transition>

Dalam kod di atas, kami mentakrifkan dua elemen peralihan, iaitu page-fade dan page-slide. Nama-nama ini akan digunakan untuk menambah gaya CSS tersuai untuk kesan pudar dan slaid.

Seterusnya, kita perlu menambah gaya ini dalam lembaran gaya. Contohnya:

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

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

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

Dalam kod di atas, kami menggunakan sifat peralihan CSS untuk mentakrifkan kesan peralihan, dengan masa peralihan ialah 0.5 saat dan pelonggaran ditetapkan sebagai fungsi pelonggaran. Kami juga mentakrifkan gaya apabila elemen masuk dan keluar, di mana .page-fade-enter dan .page-slide-enter ialah gaya apabila elemen masuk, .page-fade-leave-to dan .page-slide-leave- kepada Adakah gaya apabila elemen keluar, gaya ini akan mencetuskan kesan peralihan dengan menambah/mengalih keluar kelas CSS.

Akhir sekali, kita perlu menentukan keadaan pencetus kesan peralihan dalam komponen Vue. Contohnya:

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.5s ease-out;
}

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

.page-slide-enter-active,
.page-slide-leave-active {
  transition: transform 0.5s ease-out;
}

.page-slide-enter,
.page-slide-leave-to {
  transform: translateX(100%);
}

Dalam kod di atas, kami menggunakan sifat peralihan CSS untuk mentakrifkan kesan peralihan, dengan masa peralihan ialah 0.5 saat dan pelonggaran ditetapkan sebagai fungsi pelonggaran. Kami juga mentakrifkan gaya apabila elemen masuk dan keluar, di mana .page-fade-enter dan .page-slide-enter ialah gaya apabila elemen masuk, .page-fade-leave-to dan .page-slide-leave- kepada Adakah gaya apabila elemen keluar, gaya ini akan mencetuskan kesan peralihan dengan menambah/mengalih keluar kelas CSS.

Akhir sekali, kita perlu menentukan keadaan pencetus kesan peralihan dalam komponen Vue. Contohnya:

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

<transition name="page-slide" mode="out-in" appear>
  <router-view></router-view>
</transition>

Dalam kod di atas, kami menggunakan atribut mod untuk menetapkan keadaan pencetus kesan peralihan. Atribut mod mempunyai dua nilai, masuk-keluar dan keluar-masuk, yang masing-masing menunjukkan bahawa kesan peralihan memasuki elemen dicetuskan dahulu, dan kemudian kesan peralihan meninggalkan elemen dicetuskan, dan kesan peralihan meninggalkan elemen dicetuskan dahulu, dan kemudian kesan peralihan memasuki elemen dicetuskan. Kita juga boleh menggunakan atribut muncul untuk menentukan sama ada kesan peralihan perlu dicetuskan apabila elemen mula-mula dimuatkan.

2. Dengan komponen peralihan terbina dalam

Vue juga menyediakan komponen peralihan terbina dalam untuk menambah kesan peralihan dengan mudah. Di sini, kami menggunakan kesan animasi pemuatan mudah untuk menunjukkan cara menggunakan komponen peralihan terbina dalam.

Pertama, kita perlu menambah komponen peralihan pada templat komponen Vue dan menentukan atribut namanya sebagai memuatkan. Contohnya:

<transition name="loading">
  <div v-if="isLoading" class="loading">
    <div class="loader"></div>
  </div>
</transition>

Dalam kod di atas, kami menggunakan arahan v-if untuk menentukan sama ada animasi pemuatan perlu dipaparkan. Jika nilai isLoading adalah benar, animasi pemuatan dipaparkan, jika tidak, ia tidak dipaparkan. Kami juga menyediakan komponen peralihan bernama pemuatan untuk menambah gaya CSS tersuai untuk mencapai kesan animasi pemuatan.

Seterusnya, kita perlu menambah gaya ini dalam lembaran gaya. Contohnya:

.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.5s linear;
}

.loading-enter,
.loading-leave-to {
  opacity: 0;
}

Dalam kod di atas, kami menggunakan sifat peralihan CSS untuk mentakrifkan kesan peralihan, dengan masa peralihan ialah 0.5 saat dan linear ditetapkan sebagai fungsi pelonggaran. Kami juga mentakrifkan gaya apabila elemen masuk dan keluar, di mana .loading-enter dan .loading-leave-to ialah gaya apabila elemen masuk, dan .loading-enter-active dan .loading-leave-active ialah gaya apabila elemen meninggalkan , gaya ini akan mencetuskan kesan peralihan dengan menambah/mengalih keluar kelas CSS.

Akhir sekali, kita perlu mencetuskan pembukaan dan penutupan animasi pemuatan dalam komponen Vue. Contohnya:

export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    load() {
      this.isLoading = true
      // do some heavy work
      this.isLoading = false
    }
  }
}

Dalam kod di atas, kami mentakrifkan pembolehubah keadaan bernama isLoading dan mengendalikannya dalam kaedah pemuatan untuk mensimulasikan proses pemuatan halaman. Apabila nilai isLoading adalah benar, animasi pemuatan akan dihidupkan, jika tidak ia akan dimatikan.

Ringkasan

Dengan menggunakan kesan peralihan, kami boleh meningkatkan pengalaman pengguna apabila halaman bertukar, memuatkan dan berinteraksi, meningkatkan penglibatan dan kepuasan pengguna dengan berkesan. Apabila menggunakan kesan peralihan, kita perlu memberi perhatian kepada perkara berikut:

1. Pilih kesan peralihan dengan munasabah untuk mengelakkan terlalu banyak dan terlalu cepat kesan penukaran
2. Gunakan gaya CSS untuk mencapai kesan peralihan dan elakkan menggunakan JavaScript
3. Gunakan komponen peralihan terbina dalam dan atribut peralihan untuk mengelakkan pertindihan kod dan komponen berlebihan;
4. Tetapkan syarat pencetus kesan peralihan dengan munasabah untuk mengelakkan ralat dan kesan tertunda.

Jika anda menghadapi masalah dengan kesan peralihan semasa menggunakan Vue, anda boleh merujuk kepada petua dan amalan terbaik yang disediakan dalam artikel ini untuk menyelesaikannya.

Atas ialah kandungan terperinci Petua dan amalan terbaik untuk menggunakan kesan peralihan untuk mencapai penukaran halaman dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!