Animasi

Pada React, kita dapat menambahkan animasi untuk memberikan pengalaman yang menarik bagi pengguna dengan modul react-transition-group.

Terdapat 2 jenis komponen tambahan untuk animasi:

1. React CSS Transition Group
2. React Transition Group

React CSS Transition Group

ReactCSSTransitionGroup merupakan API tingkat tinggi yang dapat memudahkan dalam penerapan transisi dan animasi dengan CSS saat komponen React masuk maupun meninggalkan DOM

Pada komponen ini, ketika ada item baru yang ditambahkan ke ReactCSSTransitionGroup, maka item tersebut akan mendapatkan CSS class “example-enter” dan ditambahkan “example-enter-active” pada hitungan waktu setelahnya. Kita dapat mengubah nama transisi dengan mendefiniskannya di transitionName

Pengaturan transisi dan animasi dapat dilakukan dengan penambahan attribute CSS pada class yang dituju. Durasi animasi perlu dispesifikasikan pada CSS maupun metode saat render

Kita dapat membuat nama class secara custom. Bila hanya class enter dan leave yang disediakan, maka untuk class enter-active dan leave-active akan otomatis menambahkan akhiran `-active`

ReactCSSTransitionGroup

1. ReactCSSTransitionGroup harus terlebih dahulu dirender ke dalam DOM agar dapat menerapkan transisi ke children nya. Alternatifnya dengan menggunakan prop transitionAppear dengan nilai true
2. Setiap children harus memiliki key meskipun hanya terdapat 1 komponen
3. Animasi dapat dimatikan dengan memberikan nilai false ke prop transitionEnter ataupun transitionLeave
4. ReactTransitionGroup merupakan komponen dasar dari animasi pada React
5. Ketika sebuah komponen ditambahkan atau dihapuskan dari komponen ReactTransitionGroup, maka metode pada lifecycle spesial akan dipanggil
• componentWillAppear()
• componentDidAppear()
• componentWillEnter()
• componentDidEnter()
• componentWillLeave()
• componentDidLeave()

Kesimpulan

Animasi dapat ditambahkan untuk meningkatkan kualitas user experience

Sumber Referensi : reactjs.org | reactjs.org | tutorialspoint | w3schools