Penggunaan Transition Pada Vue Js

06/05/2017    Ekky Ridyanto    984     Website

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

Artikel, Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More