CSS-övergångar är ett utmärkt sätt att skapa interaktivitet. Det räcker, transition till det ursprungliga tillståndet för ett element, och webbläsaren animerar övergången mellan de två tillstånden. Övergångar för inneboende elementstorlekar som auto Har dock varit ett problem för webbutvecklare i decennier, och det enda alternativet var att dynamiskt beräkna höjden med JavaScript.
En annan utmaning är att starta övergångar när ett element får sin första stil - till exempel när det läggs till i DOM eller när display-värdet av none förändringar. Den här artikeln förklarar hur du löser detta problem med de nya CSS-funktionerna som calc-size(), interpolate-size, @starting-style och transition-behavior kan hanteras.
Lösning med calc-size()
Om man har ett DOM-element som kommer från ett stängt tillstånd (height: 0) till ett öppet tillstånd (height: auto) går över, animeringen exekveras vanligtvis inte, även om transitionEgenskapen är inställd. Detta beror på att webbläsare inte stöder övergångar till inneboende storlekar som auto stöd. Den nya calc-size()Funktion möjliggör dock beräkningar av dessa inneboende storheter och därmed även övergångar:
f95f6dcb193aa903adc84ce47bc4a296
De calc-size()-Funktion är ännu inte tillgänglig i alla webbläsare. En reserv kan uppnås genom att behålla originalet height: auto-Deklaration kan uppnås.
Lösning med interpolate-size
De interpolate-sizeEgenskap låter dig ställa in webbläsares interpolationsbeteende och bestämma om du ska skilja mellan nyckelord som t.ex auto bör interpolera. Som standard sker interpolation endast mellan numeriska värden. Med allow-keywords Du kan dock aktivera övergångar mellan sökord:
f95f6dcb193aa903adc84ce47bc4a296
Av dig interpolate-size: allow-keywords på :rootElement, aktiverar du det nya beteendet för hela sidan.
Övergång från display:none
Ett annat problem uppstår när ett element av display:none övergår till ett synligt tillstånd. Det display är inte en animerbar egenskap, ingen animering sker. De nya CSS-funktionerna hjälper här @starting-style och transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Med transition-behavior: allow-discrete säkerställer att animeringen körs före display-värdet av block på none är omkopplad. Dessa regler tillåter att övergångar exekveras även under en första stiluppdatering. De @starting-styleRegeln säkerställer att animeringen körs korrekt vid en första stiluppdatering.
Webbläsarstöd
För närvarande de nya fastigheterna calc-size() och interpolate-size stöds ännu inte av alla webbläsare. I Chrome är de tillgängliga bakom en experimentflagga, men ännu inte i Safari och Firefox. Likaså stöd för transition-behavior Finns i Chrome och Edge, men inte i Safari och Firefox. Förhoppningsvis kommer det att ändras i framtiden.