Vue Academy · Pelajaran

Transisi dan Animasi Rute

RouterView dengan Transition, transition-name berdasarkan rute, serta efek geser/pudar antar-rute.

Pelajaran 2 dari 413 langkah

Transisi dan Animasi Rute adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Menganimasikan Perpindahan Antar-Route

Saat URL berubah, komponen yang cocok langsung berganti. Dengan membungkus tampilan dalam Transition milik Vue, Anda dapat membuat perpindahan antarhalaman memudar atau bergeser agar terasa lebih mulus.

RouterView dengan v-slot

Untuk membuat animasi, Anda perlu mengakses komponen yang telah ditentukan. Bentuk slot berscope dari RouterView menyediakan Component dan route.

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

Membungkus dengan Transition

Letakkan Transition di sekeliling component dinamis. Vue menerapkan kelas masuk dan keluar saat komponen route dipasang dan dilepas.

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

Mengapa mode out-in?

Tanpa mode, halaman lama dan halaman baru dianimasikan bersamaan dan saling menutupi. mode="out-in" menunggu halaman lama keluar sebelum halaman baru masuk.

Mendefinisikan CSS

name menjadi awalan kelas CSS. Tentukan transisi masuk dan keluar untuk efek memudar.

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

Transisi per-Route melalui Meta

Simpan nama transisi di dalam meta route agar setiap route dapat dianimasikan secara berbeda — bergeser untuk satu bagian dan memudar untuk bagian lainnya.

{ path: '/about', component: About, meta: { transition: 'slide' } }

Menghitung Nama Transisi

Baca route.meta.transition dari slot dan ikat ke nama Transition, dengan nama bawaan sebagai cadangan.

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

Pergeseran Berarah

Anda dapat memilih transisi secara dinamis berdasarkan arah navigasi — misalnya, bergeser ke kiri saat maju dan ke kanan saat kembali — dengan membandingkan kedalaman route dalam penjaga.

Animasi Masuk dan Keluar dengan Pergeseran

Pergeseran menggabungkan opasitas dan transformasi. Gerakkan halaman yang masuk dari kanan dan halaman yang keluar ke kiri.

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>

Menentukan Key untuk Perubahan Parameter

Jika dua route menggunakan komponen yang sama (seperti /user/1 dan /user/2), Vue menggunakannya kembali dan melewati transisi. Tambahkan :key pada jalur route untuk memaksa render ulang dan animasi.

<component :is="Component" :key="route.path" />

Menghormati Preferensi Gerakan yang Dikurangi

Demi aksesibilitas, nonaktifkan animasi saat pengguna memilih gerakan yang dikurangi menggunakan kueri media CSS.

<style>
@media (prefers-reduced-motion: reduce) {
  .fade-enter-active, .fade-leave-active { transition: none; }
}
</style>

Uji Cepat

Uji pengetahuan Anda tentang transisi route.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari cara menganimasikan route:

Gunakan RouterView dengan v-slot untuk mendapatkan Component dan route.
Bungkus component :is dengan Transition dan gunakan mode="out-in".
Tentukan CSS masuk/keluar berdasarkan nama transisi.
Baca route.meta.transition untuk animasi per-route; tambahkan :key untuk komponen yang digunakan bersama.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transisi dan Animasi Rute” gratis?

Ya — teks lengkap “Transisi dan Animasi Rute” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Transisi dan Animasi Rute”?

RouterView dengan Transition, transition-name berdasarkan rute, serta efek geser/pudar antar-rute. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Transisi dan Animasi Rute” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy