Ukuguqulwa kwe-CSS kuyindlela enhle yokudala ukusebenzisana. Sekwanele, transition kusimo sokuqala se-elementi, futhi isiphequluli senza uguquko phakathi kwalezi zifunda ezimbili. Izinguquko zosayizi we-elementi yangaphakathi njenge auto Nokho, kube yinkinga kubathuthukisi bewebhu amashumi eminyaka, futhi okuwukuphela kwenketho bekuwukubala ukuphakama usebenzisa i-JavaScript.
Enye inselele ukuqala izinguquko lapho i-elementi ithola isitayela sayo sokuqala - njengalapho yengezwa ku-DOM noma lapho i- display-inani le none izinguquko. Lesi sihloko sichaza indlela yokuxazulula le nkinga ngezici ezintsha ze-CSS ezifana calc-size(), interpolate-size, @starting-style futhi transition-behavior ingaphathwa.
Isisombululo nge calc-size()
Uma umuntu enento ye-DOM evela esimweni esivaliwe (height: 0) esimweni esivulekile (height: auto) iya ngapha, ukugqwayiza ngokuvamile akwenziwa, noma i- transitionImpahla isethiwe. Lokho kungenxa yokuthi iziphequluli azikusekeli ukushintshela kumasayizi angaphakathi njengawo auto ukusekela. Entsha calc-size()Umsebenzi, nokho, unika amandla izibalo kulawa manani angaphakathi kanye noshintsho:
f95f6dcb193aa903adc84ce47bc4a296
I calc-size()-Umsebenzi awukatholakali kuzo zonke iziphequluli. Ukubuyela emuva kungafinyelelwa ngokugcina okwangempela height: auto-Isimemezelo singafinyelelwa.
Isisombululo nge interpolate-size
I interpolate-sizeImpahla ikuvumela ukuthi usethe ukuziphatha kokuhumusha kweziphequluli futhi unqume ukuthi uhlukanise phakathi kwamagama angukhiye afana nokuthi auto kufanele interpolate. Ngokuzenzakalelayo, ukuhumusha kwenzeka kuphela phakathi kwamanani ezinombolo. Nge allow-keywords Nokho, ungakwazi ukunika amandla ukuguqulwa phakathi kwamagama angukhiye:
f95f6dcb193aa903adc84ce47bc4a296
Ngawe interpolate-size: allow-keywords use :rootIsici, wenza kusebenze ukuziphatha okusha kulo lonke ikhasi.
Ukuguquka kusuka display:none
Enye inkinga ivela lapho isici se display:none ukuguqukela esimweni esibonakalayo. Lapho display akuyona into ephilayo, akukho ukugqwayiza okwenzekayo. Imisebenzi emisha ye-CSS iyasiza lapha @starting-style futhi transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Nge transition-behavior: allow-discrete iqinisekisa ukuthi ukugqwayiza kusebenza ngaphambi kwe- display-inani le block ku none iyashintshwa. Le mithetho ivumela izinguquko ukuthi zenziwe ngisho nangesikhathi sokubuyekezwa kwesitayela sokuqala. I @starting-styleUmthetho uqinisekisa ukuthi ukugqwayiza kusebenza kahle kusibuyekezo sesitayela sokuqala.
Usekelo lwesiphequluli
Okwamanje izakhiwo ezintsha calc-size() futhi interpolate-size ayikasekelwa yizo zonke iziphequluli. Ku-Chrome ayatholakala ngemuva kwefulegi lokuhlola, kodwa akukabi ku-Safari naku-Firefox. Ngokufanayo, ukusekela transition-behavior ikhona ku-Chrome naku-Edge, kodwa hhayi ku-Safari ne-Firefox. Ngethemba ukuthi lokho kuzoshintsha esikhathini esizayo.