Tranzicionet CSS janë një mënyrë e shkëlqyer për të krijuar interaktivitet. mjafton, transition në gjendjen fillestare të një elementi, dhe shfletuesi animon kalimin midis dy gjendjeve. Tranzicionet për madhësitë e elementeve të brendshme si auto Megjithatë, ka qenë një problem për zhvilluesit e uebit për dekada, dhe opsioni i vetëm ishte llogaritja dinamike e lartësisë duke përdorur JavaScript.
Një sfidë tjetër është fillimi i tranzicionit kur një element merr stilin e tij të parë - si p.sh. kur shtohet në DOM ose kur display-vlera e none ndryshimet. Ky artikull shpjegon se si ta zgjidhni këtë problem me veçoritë e reja të CSS si calc-size(), interpolate-size, @starting-style dhe transition-behavior mund të menaxhohet.
Zgjidhje me calc-size()
Nëse dikush ka një element DOM që vjen nga një gjendje e mbyllur (height: 0) në një gjendje të hapur (height: auto) kalon, animacioni zakonisht nuk ekzekutohet, edhe pse transitionProna është vendosur. Kjo për shkak se shfletuesit nuk mbështesin kalimet në madhësi të brendshme si p.sh auto mbështetje. E reja calc-size()Funksioni, megjithatë, mundëson llogaritjet mbi këto sasi të brendshme dhe kështu edhe kalimet:
f95f6dcb193aa903adc84ce47bc4a296
Të calc-size()-Funksioni nuk është ende i disponueshëm në të gjithë shfletuesit. Një rikthim mund të arrihet duke mbajtur origjinalin height: auto-Deklarata mund të arrihet.
Zgjidhje me interpolate-size
Të interpolate-sizeVetia ju lejon të vendosni sjelljen e interpolimit të shfletuesve dhe të vendosni nëse do të bëni dallimin midis fjalëve kyçe si p.sh auto duhet të interpolojë. Si parazgjedhje, interpolimi ndodh vetëm midis vlerave numerike. Me allow-keywords Sidoqoftë, mund të aktivizoni kalimet midis fjalëve kyçe:
f95f6dcb193aa903adc84ce47bc4a296
Nga ju interpolate-size: allow-keywords në :rootElement, ju aktivizoni sjelljen e re për të gjithë faqen.
Kalimi nga display:none
Një problem tjetër lind kur një element i display:none kalimi në një gjendje të dukshme. Aty display nuk është një veti e gjallë, nuk ka animacion. Funksionet e reja CSS ndihmojnë këtu @starting-style dhe transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Me transition-behavior: allow-discrete siguron që animacioni të ekzekutohet përpara display-vlera e block në none është ndërruar. Këto rregulla lejojnë që tranzicionet të ekzekutohen edhe gjatë një përditësimi fillestar të stilit. Të @starting-styleRregulli siguron që animacioni të funksionojë saktë në një përditësim fillestar të stilit.
Mbështetja e shfletuesit
Aktualisht pronat e reja calc-size() dhe interpolate-size nuk mbështetet ende nga të gjithë shfletuesit. Në Chrome ato janë të disponueshme pas një flamuri eksperimenti, por jo ende në Safari dhe Firefox. Po kështu, mbështetje për transition-behavior i pranishëm në Chrome dhe Edge, por jo në Safari dhe Firefox. Shpresojmë se kjo do të ndryshojë në të ardhmen.