Vue Academy · Pelajaran

Transisi dan Animasi CSS

Properti transition dalam CSS, animasi keyframe, menggunakan Animate.css dengan Vue Transition.

Transisi dan Animasi CSS 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.

Dua Cara Menganimasikan dalam CSS

CSS memberi Anda dua alat yang sangat cocok dengan transisi Vue: properti transition (menginterpolasi antara dua keadaan) dan @keyframes dengan animation (linimasa bertahap). Vue dapat mengendalikan keduanya.

Singkatan Transisi

Singkatan transition menggabungkan properti, durasi, fungsi pengaturan waktu, dan jeda dalam satu baris. Urutannya adalah: properti, durasi, pelandaian, jeda.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Menganimasikan Beberapa Properti

Pisahkan beberapa transisi dengan koma. Anda dapat menganimasikan transformasi dan opasitas secara bersamaan untuk menghasilkan efek geser dan memudar.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

Saat Transisi Tidak Cukup

transition hanya menganimasikan perubahan antara dua keadaan. Untuk gerakan memantul, berdenyut, atau bertahap, Anda memerlukan @keyframes, yang memungkinkan Anda menentukan banyak titik perhentian.

Mendefinisikan Bingkai Kunci

@keyframes menamai urutan keadaan menggunakan persentase (atau from/to). Setiap titik henti menjelaskan gaya pada titik tersebut dalam linimasa.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Properti Animasi

Terapkan kumpulan bingkai kunci dengan singkatan animation: nama, durasi, fungsi pengaturan waktu, jeda, jumlah pengulangan, arah.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Menghubungkan Bingkai Kunci ke Transisi

Letakkan animation pada kelas enter-active agar animasi berjalan selama penyisipan. Untuk proses keluar, jalankan bingkai kunci yang sama secara terbalik.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Menggunakan Animate.css

Animate.css adalah pustaka animasi bingkai kunci siap pakai. Daripada menulis kelas sendiri, Anda dapat memberi tahu Vue untuk langsung menggunakan kelas Animate.css melalui prop kelas khusus.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class dan leave-active-class

<Transition> menerima prop untuk mengganti nama kelas yang dihasilkan. enter-active-class dan leave-active-class memungkinkan Anda memasukkan kelas eksternal apa pun — sangat cocok untuk Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Menetapkan Durasi Secara Eksplisit

Saat pengaturan waktu CSS tidak jelas (animasi ditambah transisi), tetapkan prop duration agar Vue mengetahui dengan tepat kapan harus menghapus kelas. Prop ini menerima angka atau objek dengan enter/leave.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

Fungsi Pelandaian Itu Penting

Fungsi pewaktuan membentuk nuansa gerakan. ease-out terasa responsif untuk proses masuk, ease-in untuk proses keluar, dan cubic-bezier() memberikan kendali penuh.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Pemeriksaan Singkat

Prop mana yang memungkinkan Anda menerapkan kelas Animate.css selama proses masuk?

Ringkasan

Anda telah membandingkan singkatan transition (interpolasi dua keadaan) dengan @keyframes ditambah animation (linimasa dengan banyak tahap), serta mempelajari cara mengintegrasikan Animate.css melalui properti enter-active-class dan leave-active-class, dengan menggunakan duration untuk pengaturan waktu yang presisi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transisi dan Animasi CSS” gratis?

Ya — teks lengkap “Transisi dan Animasi CSS” 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 CSS”?

Properti transition dalam CSS, animasi keyframe, menggunakan Animate.css dengan Vue Transition. 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 CSS” 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