CSS-overgangen zijn een goede manier om interactiviteit te creëren., transition naar de begintoestand van een element en de browser animeert de overgang tussen de twee toestanden. Overgangen voor intrinsieke elementvariabelen zoals auto zijn al tientallen jaren een probleem voor webontwikkelaars en de enige optie was om de hoogte dynamisch te berekenen met JavaScript.
Een andere uitdaging is het starten van overgangen wanneer een element zijn eerste stijl krijgt - bijvoorbeeld wanneer het wordt toegevoegd aan het DOM of wanneer de display-waarde van none In dit artikel wordt uitgelegd hoe dit probleem kan worden opgelost met de nieuwe CSS-functies zoals calc-size(), interpolate-size, @starting-style en transition-behavior kan worden beheerst.
Oplossing met calc-size()
Als je een DOM-element hebt dat begint vanuit een gesloten toestand (height: 0) naar een open toestand (height: auto), wordt de animatie meestal niet uitgevoerd, hoewel de transition-Dit komt omdat browsers geen overgangen instellen naar intrinsieke variabelen zoals auto De nieuwe calc-size()-functie maakt berekeningen op deze intrinsieke variabelen mogelijk en dus ook overgangen:
f95f6dcb193aa903adc84ce47bc4a296
De calc-size()-functie is nog niet in alle browsers beschikbaar. Een fallback kan worden bereikt door de oorspronkelijke height: auto-verklaring.
Oplossing met interpolate-size
De interpolate-size-eigenschap kunt u het interpolatiegedrag van browsers definiëren en beslissen of ze moeten worden gebruikt tussen trefwoorden zoals auto Standaard vindt interpolatie alleen plaats tussen numerieke waarden. allow-keywords U kunt echter overgangen tussen trefwoorden activeren:
f95f6dcb193aa903adc84ce47bc4a296
Door interpolate-size: allow-keywords naar de :root-element, activeer je het nieuwe gedrag voor de hele pagina.
Overgang van display:none
Een ander probleem treedt op als een element van display:none naar een zichtbare staat. display geen animeerbare eigenschap is, is er geen animatie. De nieuwe CSS-functies helpen hierbij @starting-style en transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Met transition-behavior: allow-discrete zorgt ervoor dat de animatie wordt uitgevoerd voordat de display-waarde van block op none Deze regels maken het mogelijk om overgangen uit te voeren, zelfs tijdens een initiële stijlupdate. @starting-style-regel zorgt ervoor dat de animatie correct wordt uitgevoerd tijdens de eerste stijlupdate.
Browserondersteuning
De nieuwe eigendommen worden momenteel calc-size() en interpolate-size In Chrome zijn ze beschikbaar achter een experimenteervlag, maar nog niet in Safari en Firefox. Ook ondersteuning voor transition-behavior in Chrome en Edge, maar niet in Safari en Firefox, wat hopelijk in de toekomst zal veranderen.