Malay

Tutorial VueJS

VueJS - Transisi dan Animi

Pengenalan

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

VueJS - Transition & Animation

Jangan khawatir jika Anda baru dalam programming. Kita akan mulai dari dasar dan maju perlahan-lahan. Pada akhir panduan ini, Anda akan membuat animasi yang membuat teman Anda berkata, "Wah, bagaimana Anda melakukan itu?" Jadi, mari kita mulai!

Transisi

Apa Itu Transisi?

Dalam dunia pengembangan web, transisi adalah seperti perubahan mulus dari satu keadaan ke keadaan lain. Bayangkan saklar cahaya yang tidak hanya menyala dan mematikan secara tiba-tiba, tetapi malah perlahan menjadi terang atau redup. Itu esensi dari transisi!

Contoh Transisi Dasar

Mari kita mulai dengan contoh sederhana. Kita akan membuat tombol yang, saat diklik, menampilkan atau menyembunyikan pesan dengan efek pencah mulus.

<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>

mari kitauraikan ini:

  1. Kita memiliki tombol yang toggle variabel show saat diklik.
  2. Komponen <transition> membungkus 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 fade in dan fade out secara mulus. Itu menarik, kan?

Animi

Perbedaan Antara Transisi dan Animi?

Sementara transisi sangat cocok untuk perubahan state sederhana, animasi memungkinkan untuk efek multi-langkah yang lebih kompleks. Jika transisi adalah seperti menyorot lampu secara perlahan, animasi adalah seperti pertunjukan lampu dengan warna dan pola yang berbeda!

Contoh Animi Dasar

Mari kita buat animasi bola 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 secara terbalik.
  • Aturan @keyframes mendefinisikan animasi bounce-in dengan tiga langkah.

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. Ini sangat berguna saat Anda ingin menggunakan pustaka CSS animasi pihak ketiga seperti Animate.css.

Berikut adalah 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 secara langsung dalam komponen <transition>. Atribut enter-active-class dan leave-active-class mengijinkan kita menentukan kelas custom untuk animasi masuk dan keluar.

Durasi Transisi Tetap

kadang-kadang, Anda mungkin ingin menetapkan secara eksplisitberapa lama transisi atau animasi harus 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 transisi masuk dan keluar. Anda juga bisa menetapkan durasi yang berbeda untuk masuk dan keluar:

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

Hook JavaScript

Untuk kontrol yang lebih detil atas transisi Anda, Vue.js menyediakan hook JavaScript. Hook ini adalah seperti helper kecil yang mengijinkan Anda menjalankan kode pada titik spesifik selama transisi.

Berikut adalah 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 bisa menggunakannya untuk memicu animasi lain, mengupdate data, atau melakukan aksi lain pada titik spesifik selama transisi.

Transisi pada Render Awal

Secara default, transisi di Vue.js hanya terjadi saat elemen dimasukkan ke dalam atau dikeluarkan 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.

Animi pada Komponen

Akhirnya, mari kita bicara tentang animasi komponen. Berita bagus adalah Anda bisa menggunakan semua fitur transisi yang kita diskusikan pada komponen custom 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" menjamin bahwa komponen lama bertransisi keluar sebelum komponen baru bertransisi masuk.

Penutup

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

Animasi dan transisi bisa membuat aplikasi Vue.js Anda hidup. Mereka tidak hanya tentang penampilan cantik (meskipun itu adalah plus!) - mereka juga bisa meningkatkan pengalaman pengguna dengan menyediakan umpan balik visual dan memandu pengguna melalui aplikasi Anda.

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

Metode Deskripsi
transition Menggulung elemen atau komponen untuk menerapkan transisi masuk/keluar
animation Mendefinisikan animasi yang dapat digunakan kembali 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 Mengapply transisi pada render awal elemen
mode Menentukan waktu transisi keluar/masuk

Credits: Image by storyset

Tutorial Sebelumnya:
VueJS - Rendering
Tutorial Seterusnya:
VueJS - Direktif