Transisi dan animasi memainkan peran utama dalam pengalaman pengguna. Dengan menambahkan animasi halus dan transisi antar elemen di halaman web, Anda dapat meningkatkan pengalaman pengguna. Situs web akan tampak lebih halus, lebih menarik, dan umumnya lebih baik secara keseluruhan.

Tutorial ini menunjukkan cara mengimplementasikan transisi dan animasi di Vue.js. Anda akan mempelajari cara membuat transisi sederhana dan animasi kompleks menggunakan transisi komponen dan bingkai kunci CSS.

Komponen Transisi Vue.js

Vue.js memiliki bawaan transisi komponen yang memungkinkan Anda membuat animasi di aplikasi Anda. Komponen ini membungkus elemen target yang ingin kita animasikan.

Di sini komponen transisi membungkus header level satu:

 Halo </h1>
</transition>

Saat Anda membungkus elemen dengan transisi komponen, komponen akan menerapkan kelas transisi ke elemen yang dibungkusnya. Ada enam kelas transisi secara total. Tiga mengontrol animasi elemen saat memasuki halaman. Tiga lainnya mengontrol animasi elemen saat meninggalkan halaman.

Kode yang digunakan dalam artikel ini tersedia di sini repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Menerapkan Kelas Transisi Saat Elemen Memasuki Halaman

Selama proses elemen memasuki DOM, file transisi komponen berlaku kelas masuk-dari, masuk ke, Dan enter-aktif untuk itu. Kelas-kelas ini memungkinkan Anda untuk mengontrol bagaimana elemen akan dianimasikan atau dipindahkan ke halaman.

• masuk-dari: Diterapkan ke elemen sebelum memasuki browser. Anda menggunakan kelas ini untuk menyetel status CSS awal elemen.
• masuk ke: Diterapkan ke elemen saat memasuki browser. Anda menggunakan kelas ini untuk menyetel status CSS akhir dari elemen.
• enter-aktif: Diterapkan saat elemen sedang bertransisi dari satu status ke status lainnya. Di sinilah Anda menentukan berapa lama transisi akan berlangsung.

Mari kita lihat contohnya:

<transisi>
 <h1> Haloh1>
transisi>
.masuk-dari {
kegelapan: 0;
}
.masuk-ke {
kegelapan: 1;
}
.enter-aktif {
transisi: kegelapan 2Skemudahan;
}

Dengan kode ini, header level satu membutuhkan waktu dua detik untuk bertransisi dari tidak terlihat (opasitas: 0) hingga terlihat sepenuhnya (opasitas: 1). Transisi ini terjadi ketika elemen memasuki DOM. Tanpa transisi, teks akan langsung muncul di browser setelah halaman dimuat.

Menerapkan Kelas Transisi Saat Elemen Meninggalkan Halaman

Itu transisi komponen mendukung tiga kelas transisi lain yang perlu Anda terapkan saat elemen meninggalkan DOM. Nama mereka pergi dari, cuti, Dan cuti-aktif. Kelas-kelas ini mengontrol bagaimana elemen akan dianimasikan atau dipindahkan dari halaman.

Seperti yang mungkin sudah Anda duga, kelas-kelas ini mirip dengan memasuki- kelas yang telah kita bahas sebelumnya. Tetapi kelas-kelas ini hanya diaktifkan ketika elemen akan di-unmount dari DOM. Mounting dan unmounting adalah konsep penting dari DOM. Sebagai pengembang, Anda harus memiliki pemahaman dasar tentang DOM dan konsep terkait lainnya.

Mari kita lihat contohnya:

<transisi>
 <h1> Haloh1>
transisi>
.pergi dari {
kegelapan: 0;
}
.tinggalkan {
kegelapan: 1;
}
.tinggalkan-aktif {
transisi: kegelapan 2Skemudahan;
}

Dalam hal ini, header tingkat satu membutuhkan waktu dua detik untuk bertransisi perlahan dari terlihat (opasitas: 1) hingga tidak terlihat (opasitas: 0). Transisi ini terjadi saat elemen meninggalkan DOM. Tanpa transisi, teks akan langsung menghilang dari browser.

Menggunakan Nama Transisi

Anda juga dapat menambahkan nama atribut ke komponen transisi Anda. Saat Anda melakukan ini, Vue akan menambahkan nama ke kelas transisi Anda. Ini berarti Anda dapat memiliki beberapa transisi di halaman Anda, masing-masing dengan kelas transisi dan properti CSS yang unik.

Misalnya, jika Anda mengatur nama memudar pada komponen transisi Anda, maka semua kelas transisi akan diawali dengan memudar:

<transisinama ="memudar">
 <h1> Haloh1>
transisi>
.fade-masuk-dari {
kegelapan: 1;
}
.fade-tinggalkan-dari {
kegelapan: 1;
}
// lainnya "memasuki" Dan "meninggalkan" kelasdenganitumemudarsebagaiawalan

Membuat Transisi Menggunakan Komponen Transisi

Untuk mendemonstrasikan transisi di Vue.js, Anda akan membungkus sebuah H1 dalam transisi komponen. Di bawah, Anda akan membuat tombol. Ketika tombol ini diklik, itu mengubah variabel tunjukkan Judul di antara PALSU Dan BENAR.

Ini kodenya:

Selanjutnya, tentukan naskah bagian. Bagian ini berisi mempersiapkan metode di mana Anda menginisialisasi tunjukkan Judul variabel dengan PALSU.