Transisi CSS minangka cara sing apik kanggo nggawe interaktivitas. Wis cukup, transition menyang negara wiwitan unsur, lan browser animates transisi antarane rong negara. Transisi kanggo ukuran unsur intrinsik kaya auto Nanging, wis dadi masalah kanggo pangembang web sajrone pirang-pirang dekade, lan siji-sijine pilihan yaiku ngetung dhuwur kanthi dinamis nggunakake JavaScript.
Tantangan liyane yaiku miwiti transisi nalika unsur entuk gaya pisanan - kayata nalika ditambahake menyang DOM utawa nalika display- nilai saka none owah-owahan. Artikel iki nerangake carane ngatasi masalah iki karo fitur CSS anyar kaya calc-size(), interpolate-size, @starting-style lan transition-behavior bisa diatur.
Solusi karo calc-size()
Yen ana unsur DOM sing asale saka negara tertutup (height: 0) menyang negara mbukak (height: auto) dadi liwat, animasi biasane ora kaleksanan, sanajan ing transitionProperty disetel. Iku amarga browser ora ndhukung transisi menyang ukuran intrinsik kaya auto ndhukung. Sing anyar calc-size()Fungsi, Nanging, mbisakake petungan ing jumlah intrinsik lan kanthi mangkono uga transisi:
f95f6dcb193aa903adc84ce47bc4a296
Ing calc-size()-Fungsi durung kasedhiya ing kabeh browser. A fallback bisa digayuh kanthi tetep asli height: auto- Pranyatan bisa digayuh.
Solusi karo interpolate-size
Ing interpolate-sizeProperty ngijini sampeyan kanggo nyetel prilaku interpolasi saka browser lan mutusaké apa kanggo mbedakake antarane tembung kunci kayata auto kudu interpolasi. Kanthi gawan, interpolasi mung dumadi ing antarane nilai numerik. karo allow-keywords Nanging, sampeyan bisa ngaktifake transisi antarane tembung kunci:
f95f6dcb193aa903adc84ce47bc4a296
Miturut sampeyan interpolate-size: allow-keywords ing :rootUnsur, sampeyan ngaktifake prilaku anyar kanggo kabeh kaca.
Transisi saka display:none
Masalah liyane muncul nalika unsur saka display:none transisi menyang negara katon. neng kono display ora properti animatable, ora ana animasi. Fungsi CSS anyar mbantu ing kene @starting-style lan transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Karo transition-behavior: allow-discrete mesthekake yen animasi mlaku sadurunge display- nilai saka block ing none diowahi. Aturan kasebut ngidini transisi dieksekusi sanajan sajrone nganyari gaya wiwitan. Ing @starting-styleAturan mesthekake yen animasi mlaku kanthi bener ing nganyari gaya dhisikan.
Dhukungan browser
Saiki properti anyar calc-size() lan interpolate-size durung didhukung dening kabeh browser. Ing Chrome kasedhiya ing mburi flag eksperimen, nanging durung ing Safari lan Firefox. Kajaba iku, dhukungan kanggo transition-behavior Saiki ing Chrome lan Edge, nanging ora ing Safari lan Firefox. Muga-muga sing bakal diganti ing mangsa ngarep.