Tips Dan Trik Untuk Membuat Animasi Smooth Dengan Vue3
Animasi, bila dilakukan dengan benar, dapat menambahkan elemen menakjubkan ke aplikasi web. Semakin halus animasinya, semakin besar kemungkinan pengguna akan tinggal di situs Anda lebih lama. Namun, jika animasi bergerak dengan tidak benar atau terputus-putus, pengguna akan frustrasi dan cepat-cepat pergi.
Salah satu hal yang disukai pengembang tentang Vue.js dalam hal kerangka kerja aplikasi web dan animasi adalah kenyataan bahwa Vuejs mendukung animasi bawaan. Jadi Anda tidak perlu mengotak-atik atau menjelajahi library pihak ketiga. Cukup instal Vue.js dan itu akan mati. kita akan melihat beberapa tip dan trik yang dapat Anda gunakan dengan Vue3 untuk membuat animasi yang smooth.
Bagaimana saya bisa dengan mudah menambahkan animasi di Vue.js?
Vuejs mendukung transisi sebagai fitur standar. Hal ini dilakukan pada waktu yang tepat, yaitu dengan menyediakan animasi hook yang secara dinamis menambahkan kelas css saat menambahkan atau menghapus item. Transisi didasarkan pada dua keadaan animasi, dengan keadaan awal animasi dan keadaan akhir animasi, dan beberapa algoritma gerak diterapkan untuk transisi dari keadaan awal ke keadaan akhir.
Anda tidak perlu khawatir tentang algoritma gerak. Ini semua ditangani oleh browser.
Keadaan biasanya berubah ketika sesuatu ditambahkan atau dihapus dari dom, atau ketika properti elemen (seperti warna atau posisi) berubah. Vue 3 menyediakan kait ke komponen ketika perubahan tersebut dibuat di DOM. Ini dicapai dengan menggunakan wrapper komponen <transition> dan <transition-group> bawaan, mari ikuti coding sebagai berikut:
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">This will be added and removed from the DOM</p>
</transition>
</div>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
const app = Vue.createApp({
data() {
return {
show:true
}
}
})
app.mount('#demo')
Pada contoh di atas, tag
yang berisi pesan "Ini akan ditambahkan dan dihapus dari DOM" dibungkus dengan tag <transition>. Perhatikan juga bahwa ada atribut V-If = ”show”. Ini adalah mekanisme yang dengannya Anda dapat memutuskan apakah akan merender tag ini. Jika Anda mengubah nilai show menjadi false, itu akan dihapus dari tampilan.
Jika Anda melihat lebih dekat pada tag transisi wrapper, Anda dapat melihat bahwa atribut nama yang diatur dalam fade juga ditentukan: <transition name = ”fade”>. Secara internal, komponen transisi menyediakan kait yang melakukan keajaiban yang memungkinkan animasi. Kait ini menambahkan kelas css enter-leave. Kelas-kelas ini diawali dengan atribut nama yang ditentukan dalam tag transisi. Dalam contoh ini, kelas yang dihasilkan secara dinamis adalah .fade-enter-active, .fade-leave-active, .fade-enter-from, dan .fade-leave-to.
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
Sekarang mari kita terapkan ini ke daftar menggunakan <transition-group>.
Anda dapat mengambil langkah lebih jauh dengan menganimasikan sekelompok item seperti daftar. ikuti langkah dibawah:
<div id="list-demo">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item" class="list-item">
Item: {{ item }}
</li>
</transition-group>
</div>
* {padding:0;
margin:0}
body {
margin: 30px;
}
button {
margin: 0 10px 20px 0;
}
.list-item {
display: inline-block;
display: block;
width: 30%;
position: relative;
overflow: hidden;
border: 3px solid #BBDEFB;
}
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
const Demo = {
data() {
return {
items: [1, 2, 3, 4],
nextNum: 10
}
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length)
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove() {
this.items.splice(this.randomIndex(), 1)
}
}
}
Vue.createApp(Demo).mount('#list-demo')
Berikut adalah beberapa metode yang terkait dengan tombol untuk menambah dan menghapus item. Bagian penting dari template adalah blok kode untuk membuat daftar saat item ditambahkan dan dihapus.
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item" class="list-item">
Item: {{ item }}
</li>
</transition-group>
Anda menggunakan <transition-group>. Ganti <ul> biasa dengan <transition-groupname = ”list” tag = ”ul”>. Tag transisi memiliki atribut tag yang disetel ke "ul". Ini akan memastikan bahwa Anda sedang merender ul. Juga, tentukan atribut nama sebagai "daftar". Mengetahui hal ini, Anda dapat menambahkan properti gaya animasi untuk kelas yang dibuat secara dinamis, seperti yang ditunjukkan di bawah ini.
/* Vue generated animation state classes for active state*/
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
/* Vue generated animation state classes for enter and leave states*/
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
Properti "Transisi: Semua 1 akan lebih mudah." Menerapkan transisi ke kelas status aktif untuk semua properti, tetapi hanya menganimasikan opacity dan posisi y. Ini juga menerapkan fungsi kemudahan bawaan untuk menentukan jenis animasi halus yang Anda butuhkan. kelas. "list-enter-from" adalah kelas posisi awal saat menambahkan item, dan kelas ".list-leave-to" adalah posisi akhir saat menghapus item.
Untuk animasi yang lebih canggih, gunakan bingkai utama.
Anda dapat menggunakan bingkai utama untuk menerapkan status perantara antara status awal dan akhir untuk animasi tingkat lanjut. Contoh berikut menambahkan efek yang menyebabkan item terpental dan terpental.
<div id="list-demo">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item" class="list-item">
Item: {{ item }}
</li>
</transition-group>
</div>
* {padding:0;
margin:0}
body {
margin: 2% 0 0 5% ;
}
button {
margin: 0 10px 20px 0;
}
.list-item {
display: inline-block;
display: block;
width: 10%;
position: relative;
overflow: hidden;
border: 3px solid #BBDEFB;
background-color: #BBDEFB;
margin-bottom:10px;
}
.list-enter-active {
animation: bounce-in 0.5s;
}
.list-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
const Demo = {
data() {
return {
items: [1, 2, 3, 4],
nextNum: 10
}
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length)
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove() {
this.items.splice(this.randomIndex(), 1)
}
}
}
Vue.createApp(Demo).mount('#list-demo')
Jadi gaya kelas status animasi yang dihasilkan oleh Vue terlihat seperti ini:
Untuk memantul, gunakan animasi yang sama secara terbalik. Oleh karena itu, kelas .list-leave-active memiliki kata kunci terbalik.
.list-leave-active {
animation: bounce-in 0.5s reverse;
}
sekian tutorial yang dapat saya berikan semoga bermanfaat untuk teman-teman :)