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

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

-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