Transisi CSS dengan Perubahan Status React

Transisi CSS transition menginterpolasikan sebuah properti secara halus antara dua nilai selama jangka waktu tertentu, alih-alih berpindah secara instan. Anda mendeklarasikannya pada elemen dengan transition: property duration timing-function delay.

Dalam React, biasanya Anda tidak menganimasikan nilai sebaris secara manual. Sebagai gantinya, Anda mengganti kelas atau gaya berdasarkan status, lalu CSS menangani bingkai perantara untuk Anda.

Pola yang umum adalah menyimpan nilai benar-salah dalam useState dan mengganti kelas CSS saat nilainya berubah. Saat kelas berubah, properti target memperoleh nilai baru dan CSS menganimasikan perbedaannya.

Misalnya, isOpen menentukan apakah elemen memiliki kelas open, dan kelas open menetapkan tinggi atau transformasi yang berbeda.

Pengaturan yang umum adalah const [isVisible, setIsVisible] = useState(false). Sebuah tombol memanggil setIsVisible(v => !v) untuk membalik nilainya.

Menggunakan pembaru berbasis fungsi v => !v mencegah penggunaan status lama saat beberapa pembaruan masuk antrean, sehingga penggantian tetap andal.

Anda membuat className secara dinamis: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Kelas dasar menyimpan deklarasi transisi, sedangkan kelas pengubah menyimpan nilai awal dan akhir.

Menempatkan transition pada kelas dasar yang selalu ada memastikan animasi berjalan dalam kedua arah, saat membuka maupun menutup.

Anda dapat menganimasikan beberapa properti sekaligus dengan mencantumkannya: transition: transform 300ms ease, opacity 300ms ease. Efek pudar dan geser menggabungkan perubahan opacity dengan translateY pada transform.

Menganimasikan keduanya secara bersamaan menghasilkan kemunculan yang rapi, saat elemen bergeser ke atas sambil memudar masuk.

transition-delay menunda dimulainya transisi. Dengan memberikan jeda yang semakin panjang pada setiap elemen daftar, Anda membuat rangkaian bertingkat yang membuat setiap elemen menganimasi sedikit setelah elemen sebelumnya.

Dalam React, Anda dapat menghitung jeda secara sebaris, misalnya style={{ transitionDelay: index * 50 + 'ms' }}.

Properti display tidak dapat dianimasikan karena tidak memiliki nilai perantara antara none dan block. Mentransisikannya menghasilkan lompatan instan, bukan efek pudar.

Sebagai gantinya, animasikan opacity untuk menghasilkan efek pudar secara visual dan aktifkan atau nonaktifkan pointer-events: none agar elemen tersembunyi mengabaikan klik saat tidak terlihat.

Fungsi pengaturan waktu menentukan bagaimana kecepatan berubah selama durasi. linear bergerak dengan kecepatan konstan, ease dimulai dan berakhir secara perlahan, sedangkan cubic-bezier(...) memungkinkan Anda menentukan kurva khusus sepenuhnya.

Kurva khusus cocok untuk nuansa yang cepat atau memantul, misalnya cubic-bezier(0.34, 1.56, 0.64, 1) untuk sedikit efek melewati sasaran.

Anda dapat menyimpan durasi dalam properti khusus CSS seperti --speed: 300ms dan menggunakannya kembali: transition: opacity var(--speed) ease. Hal ini menjaga waktu tetap konsisten di berbagai komponen.

React bahkan dapat menetapkan variabel tersebut secara sebaris melalui style={{ '--speed': '500ms' }}, sehingga properti komponen dapat mengatur waktu animasi.

Peramban dapat menganimasikan transform dan opacity pada kompositor GPU tanpa menghitung ulang tata letak atau menggambar ulang. Menganimasikan properti seperti width, top, atau margin memaksa peramban melakukan pekerjaan tata letak pada setiap bingkai dan dapat menyebabkan gerakan tersendat.

Saat perlu memindahkan, menskalakan, atau memutar elemen, gunakan transform; saat perlu membuatnya memudar, gunakan opacity.

Transisi yang andal dalam React menggabungkan status benar-salah, kelas pengubah kondisional, dan kelas dasar yang mendeklarasikan transition pada properti yang ramah GPU. Status mengganti kelas, lalu CSS melakukan animasinya.

Hal ini menjaga komponen tetap deklaratif sekaligus memanfaatkan peramban untuk menghasilkan gerakan yang halus.

Uji pemahaman Anda tentang animasi yang efisien.

Anda telah mempelajari cara memicu transisi CSS dengan mengganti kelas yang dikendalikan status, menganimasikan transformasi dan opasitas secara bersamaan, membuat jeda bertingkat, serta menghindari transisi pada display dengan menggunakan opasitas dan pointer-events.

Anda juga telah mempelajari fungsi pengaturan waktu, durasi dengan variabel CSS, dan alasan properti yang dikomposisikan GPU menjaga gerakan tetap halus.