Vue Academy · Pelajaran

Hook Transisi JavaScript

Hook @before-enter, @enter, @after-enter, @leave, menggunakan GSAP untuk animasi kompleks.

Hook Transisi JavaScript adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Menggunakan Hook JavaScript

Kelas CSS mencakup sebagian besar kasus, tetapi beberapa animasi memerlukan JavaScript—misalnya mengintegrasikan pustaka seperti GSAP, menganimasikan kanvas, atau menghitung nilai dinamis. <Transition> menyediakan hook siklus hidup khusus untuk kebutuhan ini.

Hook yang Tersedia

Vue memancarkan peristiwa untuk setiap tahap: @before-enter, @enter, @after-enter, @enter-cancelled, serta hook leave yang sesuai.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

before-enter Menetapkan Keadaan Awal

@before-enter menerima elemen DOM dan berjalan sebelum penyisipan. Gunakan hook ini untuk menetapkan gaya awal, seperti yang dilakukan oleh kelas enter-from.

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

enter Menerima el dan done

@enter menerima dua argumen: elemen dan panggilan balik done. Animasikan elemen tersebut, lalu panggil done() setelah selesai agar Vue mengetahui bahwa transisi telah berakhir.

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

Selalu Panggil done

Jika Anda lupa memanggil done(), Vue akan menunggu selamanya dan transisi tidak pernah selesai—after-enter tidak pernah dijalankan, dan elemen mungkin tetap berada dalam keadaan setengah teranimasi. Memanggilnya wajib dilakukan dalam hook yang digerakkan oleh JS.

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

leave dengan done

Hook @leave bekerja dengan cara yang sama: animasikan elemen hingga keluar, lalu panggil done() agar Vue menghapusnya dari DOM.

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

after-enter untuk Pembersihan

@after-enter berjalan setelah enter selesai. Gunakan hook ini untuk menghapus gaya sebaris, mengatur ulang properti transisi, atau memicu logika lanjutan.

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

Lewati CSS dengan :css="false"

Saat Anda menganimasikan sepenuhnya dengan JS, tetapkan :css="false". Ini memberi tahu Vue untuk melewati deteksi kelas CSS sepenuhnya, sehingga Vue hanya mengandalkan panggilan balik done Anda untuk pengaturan waktu. Cara ini juga mencegah gangguan CSS yang tidak disengaja.

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

Mengintegrasikan GSAP

Hook JS sangat berguna bersama pustaka animasi. GSAP dapat menginterpolasi elemen dan menerima done sebagai panggilan balik onComplete.

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

Hook yang Dibatalkan

@enter-cancelled dan @leave-cancelled dijalankan jika transisi terhenti, misalnya saat pengguna melakukan toggle dengan cepat. Gunakan hook ini untuk menghentikan interpolasi yang sedang berjalan dan mencegah state yang tersisa.

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

Kapan Memilih Hook JS

Gunakan hook JS saat Anda memerlukan fisika, nilai dinamis untuk setiap elemen, integrasi pustaka, atau pengurutan yang presisi. Untuk fade dan slide sederhana, kelas CSS lebih sederhana dan lebih efisien.

Pemeriksaan Singkat

Mengapa Anda meneruskan :css="false" bersama hook JavaScript?

Ringkasan

Anda telah mempelajari hook transisi JS: @before-enter (menetapkan state awal), @enter/@leave (menganimasikan, lalu memanggil done), @after-enter (pembersihan), serta :css="false" untuk melewati kelas CSS dan hook yang dibatalkan untuk menangani gangguan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Hook Transisi JavaScript” gratis?

Ya — teks lengkap “Hook Transisi JavaScript” 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 “Hook Transisi JavaScript”?

Hook @before-enter, @enter, @after-enter, @leave, menggunakan GSAP untuk animasi kompleks. 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 3 dari 4.

Berapa lama pelajaran “Hook Transisi JavaScript” 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