Cara Penggunaan Custom Transition Pada Vue Js

Pada bagian ini bila teman teman ingin menggunakan custom transition atau kita bisa membuat efek custom untuk aplikasi Vue Js-nya. Saya akan berikan contoh simplenya kita akan menggunakan animasi dari library animate.css yang mana library tersebut untuk melakukan beberapa animasi yang menarik untuk kita gunakan dengan cara memanggil sesuai nama classnya. Website resminya di bawah ini animate.css. Jadi pastikan teman teman download dan link kan CSS-nya kedalam struktur HTML-nya. Lalu kita akan buat nama custom sebagai nilai dari attribute transitionnya misalnya 'cuctom-animate'

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-1

Dan setelah itu kita akan daftarkan nama customnya dibagian Vuenya dengan menuliskan Vue.transition dengan menentukan namacustomnya dan yang kedua ada opsi-opsi yang kita berikan

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-2

Opsinya sendiri ada enterClass ketika kita memulai transitionnya dan enterLeave ketika meninggalkannya. Tentu nilainya ada banyak pilihan yang bisa digunakan class-class animate.css dibagian documentasinya

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-3

Selanjutnya syarat menggunakan animate.css tidak boleh lupa selalu menambahkan class animated dibagian tag <component> nya karena bila tidak menuliskan class itu maka animasinya tidak akan berjalan

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-4

Nah bila tidak ada kesalahan kita bisa lihat sekarang animasi perpindahan halaman satu kehalaman lainnya sudah memiliki efek dari animate.cssnya. Sebelum kita akhiri ada satu lagi yang menarik di Vue Js yaitu stagger. Stagger ini nama class standar dari Vue Js yang dimana gunanya untuk memberikan efek delay pada kasus ini kita akan membuat sebuah inputan text. Idenya kita akan buat input filter sederhana dengan menentukan v-model adalah sebagai berikut

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-5

Lalu dibagian directive v-fornya kita berikan tanda garis lurus dengan menuliskan filterBy nama v-modelnya yaitu search

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-6

Dan bila coba masukkan input filternya artinya dia akan langsung menghilangkan yang lain tanpa ada delay sama sekali. Untuk itu kita bisa berikan attribute transition dengan nilai stagger lalu staggernya kita berikan nilai 100 seperti ini

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-7

Maka teman teman bisa lihat efeknya lebih lambat dan lebih menarik dari pada hasil sebelumnya.

Cara-Penggunaan-Custom-Transition-Pada-Vue-Js-07-05-2017-8

Itu dia smeoga jelas tentang penggunaan custom transition Vue Js silahkan teman teman berkreasi. Terima kasih.

7 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat