Peralihan CSS ialah cara terbaik untuk mencipta interaktiviti. Cukuplah, transition kepada keadaan awal elemen, dan penyemak imbas menghidupkan peralihan antara dua keadaan. Peralihan untuk saiz unsur intrinsik seperti auto Walau bagaimanapun, telah menjadi masalah untuk pembangun web selama beberapa dekad, dan satu-satunya pilihan adalah untuk mengira ketinggian secara dinamik menggunakan JavaScript.
Cabaran lain ialah memulakan peralihan apabila elemen mendapat gaya pertama - seperti apabila ia ditambahkan pada DOM atau apabila display-nilai daripada none perubahan. Artikel ini menerangkan cara menyelesaikan masalah ini dengan ciri CSS baharu seperti calc-size(), interpolate-size, @starting-style dan transition-behavior boleh diuruskan.
Penyelesaian dengan calc-size()
Jika seseorang mempunyai elemen DOM yang berasal dari keadaan tertutup (height: 0) kepada keadaan terbuka (height: auto) berlalu, animasi biasanya tidak dilaksanakan, walaupun transitionHarta ditetapkan. Itu kerana penyemak imbas tidak menyokong peralihan kepada saiz intrinsik seperti auto sokongan. Yang baru calc-size()Fungsi, bagaimanapun, membolehkan pengiraan pada kuantiti intrinsik ini dan dengan itu juga peralihan:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-Fungsi belum tersedia dalam semua pelayar. Pengunduran boleh dicapai dengan mengekalkan yang asal height: auto-Pengisytiharan boleh dicapai.
Penyelesaian dengan interpolate-size
The interpolate-sizeHarta membolehkan anda menetapkan tingkah laku interpolasi pelayar dan memutuskan sama ada untuk membezakan antara kata kunci seperti auto harus interpolasi. Secara lalai, interpolasi hanya berlaku antara nilai angka. Dengan allow-keywords Walau bagaimanapun, anda boleh mendayakan peralihan antara kata kunci:
f95f6dcb193aa903adc84ce47bc4a296
Oleh awak interpolate-size: allow-keywords pada :rootElemen, anda mengaktifkan tingkah laku baharu untuk keseluruhan halaman.
Peralihan daripada display:none
Masalah lain timbul apabila unsur display:none peralihan kepada keadaan yang boleh dilihat. di sana display bukan harta boleh animasi, tiada animasi berlaku. Fungsi CSS baharu membantu di sini @starting-style dan transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Dengan transition-behavior: allow-discrete memastikan bahawa animasi berjalan sebelum display-nilai daripada block pada none dihidupkan. Peraturan ini membenarkan peralihan dilaksanakan walaupun semasa kemas kini gaya awal. The @starting-stylePeraturan memastikan bahawa animasi berjalan dengan betul pada kemas kini gaya awal.
Sokongan penyemak imbas
Pada masa ini hartanah baharu calc-size() dan interpolate-size belum disokong oleh semua pelayar. Dalam Chrome ia tersedia di belakang bendera percubaan, tetapi belum lagi dalam Safari dan Firefox. Begitu juga, sokongan untuk transition-behavior hadir dalam Chrome dan Edge, tetapi tidak dalam Safari dan Firefox. Semoga ia akan berubah pada masa akan datang.