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ë përcaktoni sjelljen e interpolimit të shfletuesve dhe të vendosni nëse shfletuesit duhet të interpolojnë midis fjalëve kyçe të tilla si 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
Ju kthehuni 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.