Kala-guurka CSS waa hab fiican oo lagu abuuro is dhexgal. Waa ku filan tahay, transition ilaa heerka hore ee curiyaha, browser-kuna waxa uu dhaqaajiyaa kala guurka labada gobol. Kala-guurka cabbirrada curiyaha gudaha sida auto Si kastaba ha ahaatee, waxay dhibaato ku ahaayeen horumarinta shabakadaha muddo tobanaan sano ah, ikhtiyaarka kaliya ayaa ahaa in la xisaabiyo dhererka si firfircoon iyadoo la adeegsanayo JavaScript.
Caqabad kale ayaa ah bilawga kala-guurka marka shay uu helo qaabkiisa ugu horreeya - sida marka lagu daro DOM ama marka display-qiimaha none isbedel. Maqaalkani wuxuu sharxayaa sida loo xalliyo dhibaatadan sifooyinka cusub ee CSS sida calc-size(), interpolate-size, @starting-style iyo transition-behavior waa la maarayn karaa.
Xal la calc-size()
Haddii mid leeyahay DOM curiye ka yimid xaalad xiran (height: 0) xaalad furan (height: auto) dhaafo, animation-ka inta badan lama fuliyo, inkastoo transitionHantidii la dhigay. Taasi waa sababta oo ah daalacayaashu ma taageeraan u gudubka cabbirrada gudaha sida auto taageero. Kan cusub calc-size()Shaqada, si kastaba ha ahaatee, waxay awood u siinaysaa xisaabinta tiradan gudaha ah oo sidaas oo kale u gudubta:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-Function weli lagama heli karo dhammaan daalacashada. Dib-u-dhac ayaa lagu gaari karaa iyadoo la hayo asalka height: auto-Baaqid waa la gaari karaa.
Xal la interpolate-size
The interpolate-sizeHantidu waxay kuu ogolaanaysaa inaad dejiso habdhaqanka isdhexgalka ee daalacashada oo aad go'aansato inaad kala soocdo ereyada muhiimka ah sida auto waa in ay is dhexgalaan. Sida caadiga ah, isdhexgalku wuxuu u dhexeeyaa kaliya qiimaha tirooyinka. leh allow-keywords Si kastaba ha ahaatee, waxaad awood u yeelan kartaa kala-guurka u dhexeeya ereyada muhiimka ah:
f95f6dcb193aa903adc84ce47bc4a296
Adigaa interpolate-size: allow-keywords on the :rootElement, waxaad dhaqaajisaa dhaqanka cusub ee bogga oo dhan.
Ka gudbida display:none
Dhibaato kale ayaa soo baxda marka element ah display:none u gudbida xaalad muuqata. Halkaa display ma aha hanti noole, ma dhacdo animation. Hawlaha cusub ee CSS ayaa halkan ku caawinaya @starting-style iyo transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Leh transition-behavior: allow-discrete waxay hubisaa in animation-ku uu socdo ka hor display-qiimaha block on none waa la beddelaa. Xeerarkani waxay oggolaadaan kala-guurka in la fuliyo xitaa inta lagu jiro casriyeynta qaabka bilowga ah. The @starting-styleQaanuunku wuxuu xaqiijinayaa in animationku si sax ah ugu socdo cusboonaysiinta qaabka bilowga ah.
Taageerada browserka
Hadda guryaha cusub calc-size() iyo interpolate-size weli ma taageeraan dhammaan daalacashada Chrome-ka waxaa laga heli karaa gadaasha calanka tijaabada, laakiin aan wali ku jirin Safari iyo Firefox. Sidoo kale, taageerada transition-behavior Ku jira Chrome iyo Edge, laakiin kuma jiraan Safari iyo Firefox. Waxaan rajeyneynaa in taasi isbedeli doonto mustaqbalka.