Utshintsho lweCSS yindlela entle kakhulu yokudala intsebenziswano. Kwanele, transition ukuya kwimo yokuqala yento, kwaye isikhangeli sivuselela inguqu phakathi kwala mazwe mabini. Utshintsho lobungakanani bento yangaphakathi njenge auto Nangona kunjalo, ibiyingxaki kubaphuhlisi bewebhu amashumi eminyaka, kwaye ekuphela kwendlela ibikukubala ukuphakama usebenzisa iJavaScript.
Omnye umceli mngeni kukuqalisa iinguqu xa into ifumana isitayile sayo sokuqala - njengaxa yongezwa kwiDOM okanye xa display-ixabiso le none utshintsho. Eli nqaku lichaza indlela yokusombulula le ngxaki ngeempawu ezintsha zeCSS ezifana calc-size(), interpolate-size, @starting-style kwaye transition-behavior inokulawulwa.
Isisombululo nge calc-size()
Ukuba umntu unesiqalelo se-DOM esivela kwindawo evaliweyo (height: 0) ukuya kwindawo evulekileyo (height: auto) iya ngapha, oopopayi abaqhele ukwenziwa, nangona i transitionIpropati iseti. Kungenxa yokuba iibhrawuza aziluxhasi utshintsho kwiisayizi zangaphakathi ezifana auto inkxaso. Entsha calc-size()Umsebenzi, nangona kunjalo, yenza ubalo kwezi zixa zangaphakathi kwaye ngokunjalo neenguqu:
f95f6dcb193aa903adc84ce47bc4a296
I calc-size()-Umsebenzi awukafumaneki kuzo zonke iibhrawuza. Ukubuyisela umva kunokufezekiswa ngokugcina imvelaphi height: auto-Isibhengezo sinokufezekiswa.
Isisombululo nge interpolate-size
I interpolate-sizeIpropathi ikuvumela ukuba usete indlela yokuziphatha yoguqulelo lwezikhangeli kwaye uthathe isigqibo sokuba ukwahlula phakathi kwamagama angundoqo anje auto kufuneka idibanise. Ngokungagqibekanga, uguqulelo lwenzeka kuphela phakathi kwamaxabiso amanani. Nge allow-keywords Nangona kunjalo, unokwenza utshintsho phakathi kwamagama angundoqo:
f95f6dcb193aa903adc84ce47bc4a296
Ngawe interpolate-size: allow-keywords kwi :rootIsiqalelo, wenza indlela entsha yokuziphatha kulo lonke iphepha.
Utshintsho ukusuka display:none
Enye ingxaki ivela xa i element ye display:none iinguqu ukuya kwimeko ebonakalayo. Pha display Asiyopropathi ephilayo, akukho mifanekiso eyenzekayo. Imisebenzi emitsha yeCSS iyanceda apha @starting-style kwaye transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Nge transition-behavior: allow-discrete iqinisekisa ukuba oopopayi babaleka phambi kwe display-ixabiso le block kwi none iyatshintshwa. Le migaqo ivumela utshintsho ukuba lwenziwe nangexesha lohlaziyo lwesitayile sokuqala. I @starting-styleUmthetho uqinisekisa ukuba oopopayi babaleka ngokuchanekileyo kuhlaziyo lwesimbo sokuqala.
Inkxaso yebhrawuza
Ngoku iipropati ezintsha calc-size() kwaye interpolate-size ayikaxhaswa zizo zonke iibhrawuza. KwiChrome ziyafumaneka emva kweflegi yovavanyo, kodwa ayikabikho kwiSafari nakwiFirefox. Ngokufanayo, inkxaso ye transition-behavior ikhona kwiChrome nakwiEdge, kodwa hayi kwiSafari nakwiFirefox. Ngethemba ukuba oko kuya kutshintsha kwixesha elizayo.