VueJS - Transisi dan Animasi

Pengenalan

Halo teman-teman masa depan para ahli Vue.js! ? Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini melalui dunia magis transisi dan animasi di Vue.js. Sebagai orang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa menambah transisi yang halus dan animasi yang menarik ke dalam aplikasi web Anda adalah seperti menambah manis ke kue - itu membuat segala sesuatu menjadi lebih menyenangkan!

Jangan khawatir jika Anda baru belajar pemrograman. Kita akan mulai dari dasar dan kemudian maju. Pada akhir panduan ini, Anda akan menciptakan animasi yang akan membuat teman Anda berkata, "Wow, bagaimana Anda melakukan itu?" Jadi, mari kita mulai!

Transisi

Apa Itu Transisi?

Dalam dunia pengembangan web, transisi adalah seperti perubahan yang halus dari satu keadaan ke keadaan lain. Bayangkan saklar lampu yang tidak hanya secara tiba-tiba menyalakan dan mematikan, tapi sebaliknya perlahan meningkatkan atau menurunkan intensitas cahaya. Itu esensi dari transisi!

Contoh Transisi Dasar

mari mulai dengan contoh sederhana. Kita akan membuat tombol yang, saat diklik, menampilkan atau menyembunyikan pesan dengan efek pencahayaan halus.

<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, I'm a transitioning message!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

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

mariuraikan ini:

1. Kita memiliki tombol yang mengubah variabel show saat diklik.
2. Komponen <transition> mengelilingi pesan kita, dengan atribut name diatur ke "fade".
3. Direktif v-if pada paragraf menampilkan atau menyembunyikan pesannya berdasarkan variabel show.
4. Dalam bagian <style>, kita mendefinisikan kelas transisi kita:

• .fade-enter-active dan .fade-leave-active menetapkan durasi transisi ke 0,5 detik.
• .fade-enter dan .fade-leave-to menetapkan opacity awal dan akhir ke 0 (tidak terlihat).

Saat Anda mengklik tombol, pesan akan muncul dan hilang secara halus. Bagus bukan?

Animasi

Apa Perbedaan Antara Transisi dan Animasi?

Sementara transisi sangat cocok untuk perubahan keadaan sederhana, animasi memungkinkan Anda untuk menciptakan efek multi-tahap yang lebih kompleks. Jika transisi adalah seperti perlahan memadamkan lampu, animasi adalah seperti pertunjukan lampu dengan banyak warna dan pola!

Contoh Animasi Dasar

mari menciptakan animasi bola yang melompat:

<template>
<div>
<button @click="show = !show">Bounce!</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

Dalam contoh ini:

1. Kita menggunakan mekanisme tombol toggle yang sama seperti sebelumnya.
2. Komponen <transition> sekarang memiliki nama "bounce".
3. Dalam bagian <style>, kita mendefinisikan:

• .bounce-enter-active menerapkan animasi bounce-in.
• .bounce-leave-active menerapkan animasi bounce-in dalam urutan terbalik.
• Aturan @keyframes mendefinisikan animasi bounce-in dengan tiga tahap.

Saat Anda mengklik tombol, bola akan muncul dengan efek melompat dan hilang dengan reverse bounce. Menyenangkan kan?

Kelas Transisi Custom

Vue.js memberikan fleksibilitas untuk menggunakan kelas CSS custom untuk transisi Anda. Ini sangat berguna saat Anda ingin menggunakan pustaka animasi CSS pihak ketiga seperti Animate.css.

Berikut cara Anda bisa menggunakan kelas custom:

<template>
<div>
<button @click="show = !show">Animate!</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? To infinity and beyond!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Asumsi kita telah mengimpor Animate.css di sini */
</style>

Dalam contoh ini, kita menggunakan kelas Animate.css langsung dalam komponen <transition>. Atribut enter-active-class dan leave-active-class mengijinkan kita menentukan kelas custom untuk animasi masuk dan keluar.

Durasi Transisi Eksplisit

kadang-kadang, Anda mungkin ingin menetapkan secara eksplisit berapa lama transisi atau animasi Anda berlangsung. Vue.js mengijinkan Anda melakukan ini dengan properti :duration:

<template>
<div>
<button @click="show = !show">Slow Motion</button>
<transition :duration="1000">
<p v-if="show">I'm moving in slow motion...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Di sini, kita menetapkan durasi ke 1000 milidetik (1 detik) untuk kedua transisi masuk dan keluar. Anda juga dapat menetapkan durasi berbeda untuk masuk dan keluar:

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

Hook JavaScript

Untuk kontrol yang lebih banyak atas transisi Anda, Vue.js menyediakan hook JavaScript. Hook ini adalah seperti asisten kecil yang memungkinkan Anda menjalankan kode di titik-titik spesifik selama transisi.

Berikut contoh:

<template>
<div>
<button @click="show = !show">Animate</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? I'm controlled by JavaScript!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Before enter');
},
enter(el, done) {
console.log('Enter');
done();
},
afterEnter(el) {
console.log('After enter');
},
enterCancelled(el) {
console.log('Enter cancelled');
},
beforeLeave(el) {
console.log('Before leave');
},
leave(el, done) {
console.log('Leave');
done();
},
afterLeave(el) {
console.log('After leave');
},
leaveCancelled(el) {
console.log('Leave cancelled');
}
}
}
</script>

Hook ini memberikan Anda kontrol tepat atas proses transisi. Anda dapat menggunakan mereka untuk memicu animasi lain, mengupdate data, atau melakukan aksi lainnya di titik-titik spesifik selama transisi.

Transisi Pada Render Awal

Secara default, transisi di Vue.js hanya terjadi saat elemen dimasukkan ke atau dihapus dari DOM. Tetapi apa bila Anda ingin elemen bertransisi saat render awal? Vue.js menangani hal ini dengan atribut appear:

<template>
<div>
<transition appear>
<p>? I appear with a transition!</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

Dengan atribut appear, elemen akan bertransisi saat komponen pertama kali dirender.

Animasi pada Komponen

Akhirnya, mari bicarakan animasi pada komponen. Berita baik adalah Anda dapat menggunakan semua fitur transisi yang kita diskusikan pada komponen khusus Anda juga!

<template>
<div>
<button @click="toggleComponent">Switch Component</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

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

Dalam contoh ini, kita beralih antara dua komponen dengan transisi fade. Atribut mode="out-in" memastikan bahwa komponen lama bertransisi keluar sebelum komponen baru bertransisi masuk.

Kesimpulan

Wah, kita telah menelusuri banyak hal! Dari transisi sederhana hingga animasi kompleks, kelas custom hingga hook JavaScript, dan bahkan animasi pada komponen. Ingat, kunci untuk menguasai konsep ini adalah latihan. Jadi, cobalah contoh ini, campurkan teknik yang berbeda, dan terutama, bersenang-senang!

Animasi dan transisi dapat benar-benar membuat aplikasi Vue.js Anda hidup. Mereka tidak hanya tentang penampilan cantik - mereka juga dapat meningkatkan pengalaman pengguna dengan memberikan umpan balik visual dan memandu pengguna melalui aplikasi Anda.

Terus eksplorasi, terus ciptakan, dan sebelum Anda tahu, Anda akan menjadi ahli animasi di tim pengembangan Anda. Selamat coding, para ahli Vue.js masa depan! ?✨

Metode	Deskripsi
transition	Mengelilingi elemen atau komponen untuk menerapkan transisi masuk/keluar
animation	Mendefinisikan animasi yang dapat digunakan untuk elemen
enter-active-class	Menentukan kelas CSS custom untuk transisi masuk
leave-active-class	Menentukan kelas CSS custom untuk transisi keluar
:duration	Menetapkan durasi transisi
@before-enter	Hook JavaScript yang dipanggil sebelum transisi masuk dimulai
@enter	Hook JavaScript yang dipanggil saat transisi masuk dimulai
@after-enter	Hook JavaScript yang dipanggil setelah transisi masuk selesai
@enter-cancelled	Hook JavaScript yang dipanggil saat transisi masuk dibatalkan
@before-leave	Hook JavaScript yang dipanggil sebelum transisi keluar dimulai
@leave	Hook JavaScript yang dipanggil saat transisi keluar dimulai
@after-leave	Hook JavaScript yang dipanggil setelah transisi keluar selesai
@leave-cancelled	Hook JavaScript yang dipanggil saat transisi keluar dibatalkan
appear	Mengaplikasikan transisi saat render awal elemen
mode	Menentukan timing transisi keluar/masuk

Credits: Image by storyset