Penggunaan Transition Pada Vue Js

Pada bagian sebelumnya kita sudah buat sistem dynamic component dan menambahkan attribute keep-walive. Selain attribute keep-alive kita juga bisa memberikan efek-efek sederhana yang terdapat didalam Vue Jsnya yang secara otomatis menyambungkan ke CSSnya. Sangat simple Vue Js ini menyediakan attribute transition dan nilainya adalah nama class yang mau kita gunakan sebagai nama prefix didalam CSSnya nah untuk itu kita akan tambahkan attribute transition 'fade' dibagian tag <component> -nya sebagai berikut

 Penggunaan-Transition-Pada-Vue-Js-08-05-2017-2

dan satu lagi yaitu transition-modenya yang kita berikan nilai out-in dan untuk CSSnya kita akan tulis seperti berikut

Penggunaan-Transition-Pada-Vue-Js-08-05-2017-1

-transition, -enter, -leave ini adalah aturan nama class standarnya yang dimana pada masing masing class tersebut harus didahului nama prefixnya yaitu fade. Dengan kata lain kita gabungkan apa yang akan terjadi pada transisinya lalu ada kondisi ketika kita mulai melakukan transisi sebagai .fade-enter sedangkan .fade-leave ketika kita meninggalkan halamannya. Nah teman teman sudah bisa lihat dibagian browsernya maka bila saya klik salah satu bagian link menunya maka kita lihat transition atau perpindahan halaman satu ke halamanya yang lainnya lebih halus dan lebih smooth.Jadi dengan attribute transition ini kita bisa membuat transition simple seperti yang kita lakukan diatas. Semoga jelas dan terima kasih

6 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