Cara Membuat Animasi dan Transisi di Vue.js
Table of content:
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.
Baca Juga:
Di sini komponen transisi membungkus header level satu:
<transition>
<h1> Hello </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 keDan 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:
<transition>
<h1> Hello </h1>
</transition>.enter-from {
opacity: 0;
}
.enter-to {
opacity: 1;
}
.enter-active {
transition: opacity 2s ease;
}
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, cutiDan 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:
<transition>
<h1> Hello </h1>
</transition>.leave-from {
opacity: 0;
}
.leave-to {
opacity: 1;
}
.leave-active {
transition: opacity 2s ease;
}
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:
<transition name ="fade">
<h1> Hello </h1>
</transition>.fade-enter-from {
opacity: 1;
}
.fade-leave-from {
opacity: 1;
}
// other "enter" and "leave" classes with the fade as prefix
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:
<template>
<transition name="fade">
<h1 v-if="showTitle"> Hey People </h1>
</transition>
<button @click="showTitle = !showTitle"> Toggle </button>
</template>
Selanjutnya, tentukan naskah bagian. Bagian ini berisi mempersiapkan metode di mana Anda menginisialisasi tunjukkan Judul variabel dengan PALSU.
<script>
import {ref} from 'vue'
export default {
name: "App",
setup() {
const showTitle = ref(false)
return {showTitle}
}
};
</script>
Sekarang Anda akan melihat teks dan tombol di browser Anda:
Jika Anda mengklik tombol dua kali, teks akan muncul dan kemudian menghilang. Tapi tidak akan ada transisi antara kedua negara. Mari tambahkan transisi di dalam bagian gaya:
<style>
.fade-enter-from {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter-active {
transition: opacity 2s ease;
}
.fade-leave-from {
opacity: 1
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 2s ease;
}
</style>
Saat tombol pertama kali diklik, Anda mentransisikan H1 dari buram menjadi terlihat menggunakan .memasuki kelas. Tapi ketika tombol diklik lagi, Anda menggunakan .meninggalkan kelas untuk mentransisikan H1 dari terlihat menjadi tidak terlihat.
Kedua set transisi membutuhkan waktu dua detik dan memudar masuk dan keluar dari pandangan. Anda juga dapat melihat bahwa memudar name ditambahkan ke semua nama kelas. Jika Anda gagal melakukannya, kode tidak akan berfungsi.
Membuat Animasi Kompleks Dengan CSS Keyframes
Terkadang Anda ingin animasi Anda menjadi sedikit lebih kompleks. Cara Anda melakukannya di Vue.js adalah dengan membuat animasi keyframes CSS. Lihat panduan animasi keyframes CSS kami yang mendalam jika Anda tertarik untuk mempelajari lebih lanjut.
Sebagai contoh, mari kita lihat contoh animasi goyangan. Animasi ini bergoyang H1 dari kiri ke kanan (dan sebaliknya) saat memasuki halaman. CCS berikut membuat animasi goyangan dengan @keyframe pengarahan:
@keyframes wobble {
0% { transform: translateY(-60px); opacity: 0}
50% {transform: translateY(0px); opacity: 1}
60% {transform: translateX(8px);}
70% {transform: translateX(-8px);}
80% {transform: translateX(4px);}
90% {transform: translateX(-4px);}
100% {transform: translateX(0px);}
}
Pada awal animasi, the H1 akan disembunyikan. Setengah jalan melalui animasi (50%), itu H1 akan terlihat sepenuhnya. Kemudian pada tahap animasi selanjutnya, kita memindahkan teks ke kiri dan ke kanan. Ini memberikan efek goyah.
Ini menerapkan animasi ke elemen saat memasuki halaman:
.fade-enter-active {
animation: wobble 0.5s ease;
}
Dalam hal ini, animasi akan berlangsung selama setengah detik.
Pelajari Tentang Aksesibilitas di Vue.js
Kami menekankan bagaimana transisi dan animasi dapat meningkatkan pengalaman pengguna. Aspek penting lain dari pengalaman pengguna adalah membuat aplikasi Anda lebih mudah diakses. Tidak semua pengguna sama. Beberapa mungkin memiliki kecacatan yang membuat sulit untuk mengonsumsi konten situs web Anda. Oleh karena itu, penting untuk membuat situs Anda juga dapat diakses.
Artikel Terkait
