Transisi CSS adalah cara terbaik untuk menciptakan interaktivitas. Itu sudah cukup, transition ke keadaan awal suatu elemen, dan browser menganimasikan transisi antara dua keadaan tersebut. Transisi untuk ukuran elemen intrinsik seperti auto Namun, hal ini telah menjadi masalah bagi pengembang web selama beberapa dekade, dan satu-satunya pilihan adalah menghitung ketinggian secara dinamis menggunakan JavaScript.
Tantangan lainnya adalah memulai transisi saat sebuah elemen mendapatkan gaya pertamanya - seperti saat elemen tersebut ditambahkan ke DOM atau saat elemen tersebut ditambahkan ke DOM display-nilai dari none perubahan. Artikel ini menjelaskan cara mengatasi masalah ini dengan fitur CSS baru seperti calc-size(), interpolate-size, @starting-style dan transition-behavior dapat dikelola.
Solusi dengan calc-size()
Jika seseorang memiliki elemen DOM yang berasal dari keadaan tertutup (height: 0) ke keadaan terbuka (height: auto) berakhir, animasi biasanya tidak dijalankan, meskipun transitionProperti diatur. Itu karena browser tidak mendukung transisi ke ukuran intrinsik seperti auto mendukung. Yang baru calc-size()Fungsi, bagaimanapun, memungkinkan penghitungan kuantitas intrinsik ini dan dengan demikian juga transisi:
f95f6dcb193aa903adc84ce47bc4a296
Itu calc-size()-Fungsi belum tersedia di semua browser. Penggantian dapat dicapai dengan mempertahankan yang asli height: auto-Deklarasi dapat dicapai.
Solusi dengan interpolate-size
Itu interpolate-sizeProperti memungkinkan Anda mengatur perilaku interpolasi browser dan memutuskan apakah akan membedakan kata kunci seperti auto harus melakukan interpolasi. Secara default, interpolasi hanya terjadi antar nilai numerik. Dengan allow-keywords Namun, Anda dapat mengaktifkan transisi antar kata kunci:
f95f6dcb193aa903adc84ce47bc4a296
Oleh kamu interpolate-size: allow-keywords di :rootElemen, Anda mengaktifkan perilaku baru untuk seluruh halaman.
Transisi dari display:none
Masalah lain muncul ketika suatu elemen display:none transisi ke keadaan terlihat. Di sana display bukan properti yang dapat dianimasikan, tidak ada animasi yang terjadi. Fungsi CSS baru membantu di sini @starting-style dan transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Dengan transition-behavior: allow-discrete memastikan bahwa animasi berjalan sebelum display-nilai dari block pada none diaktifkan. Aturan ini memungkinkan transisi dijalankan bahkan selama pembaruan gaya awal. Itu @starting-styleAturan memastikan bahwa animasi berjalan dengan benar pada pembaruan gaya awal.
Dukungan peramban
Saat ini properti baru calc-size() dan interpolate-size belum didukung oleh semua browser. Di Chrome, fitur tersebut tersedia di balik bendera eksperimen, namun belum tersedia di Safari dan Firefox. Demikian pula dukungan untuk transition-behavior hadir di Chrome dan Edge, tetapi tidak di Safari dan Firefox. Semoga itu akan berubah di masa depan.