Animasi Masuk dan Keluar Tanpa Pustaka

Saat Anda merender secara kondisional dengan {show && }, React menghapus elemen dari DOM segera setelah show menjadi false. Tidak ada waktu untuk animasi keluar karena simpulnya sudah tidak ada.

Animasi masuk mudah dilakukan; animasi keluar adalah tantangan yang sebenarnya.

Perbaikan paling sederhana adalah jangan pernah melepasnya. Pertahankan elemen tetap dirender dan animasikan opacity menjadi nol, ditambah pointer-events: none saat tersembunyi, lalu kembalikan menjadi satu saat ditampilkan.

Dengan cara ini, Anda mendapatkan efek pudar yang mulus di kedua arah, dengan konsekuensi elemen tetap berada di DOM.

Untuk benar-benar melepas komponen, Anda memodelkan mesin status kecil dengan fase seperti mounting, mounted, unmounting, dan unmounted. Anda hanya menghapus simpul setelah animasi keluar selesai.

Status menentukan kelas animasi yang diterapkan pada setiap fase.

Anda dapat merangkum mesin tersebut dalam pengait khusus yang sering disebut useMount. Pengait ini menerima visibilitas yang diinginkan dan mengembalikan apakah elemen harus berada di DOM, beserta fasenya saat ini.

Komponen tetap rapi karena logika waktunya berada di dalam pengait yang dapat digunakan kembali.

Mengikuti konvensi umum, terapkan enter lalu enter-active saat pemasangan, dan exit lalu exit-active saat pelepasan. Kelas dasar menetapkan status awal, sedangkan kelas aktif menetapkan status akhir dengan transisi.

Beralih di antara keduanya pada bingkai yang tepat akan menghasilkan animasi.

Untuk mengetahui kapan animasi keluar selesai, dengarkan peristiwa transitionend pada elemen. Saat peristiwa tersebut terjadi untuk animasi keluar, ubah status menjadi unmounted dan hapus simpulnya.

Dengan cara ini, pelepasan terikat secara tepat pada akhir animasi visual, bukan pada batas waktu yang diperkirakan.

Anda dapat membungkus semua hal ini dalam komponen Transition yang menerima properti in dan elemen anak. Komponen ini mempertahankan elemen anak selama animasi keluarnya dan menerapkan kelas yang tepat untuk setiap fase.

Pengguna cukup mengubah in dan langsung mendapatkan gerakan masuk serta keluar yang benar.

Perhatikan detail kecil ini: Anda harus membiarkan peramban menampilkan kelas awal sebelum menambahkan kelas aktif; jika tidak, elemen akan meloncat tanpa transisi. requestAnimationFrame atau penghitungan ulang tata letak secara paksa di antara keduanya memastikan transisi benar-benar berjalan.

Hal ini menjamin peramban mengenali nilai awal terlebih dahulu.

Pustaka react-transition-group menyediakan komponen Transition dan CSSTransition yang menerapkan pola ini secara tepat, termasuk siklus hidup kelas dan waktu pelepasan.

Versi DIY Anda mencerminkan gagasan intinya, sehingga pustaka ini mudah dipahami setelah Anda membuatnya sendiri.

Untuk satu efek pudar sederhana, pendekatan mempertahankan pemasangan atau pengait kecil sudah cukup dan menghindari dependensi. Untuk banyak transisi yang terkoordinasi, daftar dengan penambahan dan penghapusan, atau pengurutan yang rumit, pustaka menghemat waktu dan mengurangi kesalahan pada kasus khusus.

Pilihlah berdasarkan tingkat kompleksitas animasi yang benar-benar diperlukan aplikasi Anda.

Animasi keluar mengharuskan elemen tetap ada hingga animasinya selesai, baik dengan tidak pernah melepasnya, menggunakan mesin status ditambah transitionend, maupun menggunakan pustaka.

Memahami mekanismenya memungkinkan Anda memilih pendekatan paling ringan yang memenuhi kebutuhan Anda.

Uji pemahaman Anda tentang animasi keluar.

Anda telah mempelajari mengapa animasi keluar sulit, dua solusinya—mempertahankan pemasangan dan mesin status pemasangan—, cara transitionend menentukan waktu pelepasan, serta cara membuat komponen Transition yang dapat digunakan kembali.

Anda juga telah melihat kapan sebaiknya memilih react-transition-group daripada DIY.