CSS-overgange er en fantastisk måde at skabe interaktivitet på. Det er nok, transition til starttilstanden for et element, og browseren animerer overgangen mellem de to tilstande. Overgange for iboende elementstørrelser som auto Har dog været et problem for webudviklere i årtier, og den eneste mulighed var dynamisk at beregne højden ved hjælp af JavaScript.
En anden udfordring er at starte overgange, når et element får sin første stil - såsom når det føjes til DOM, eller når display-værdi af none ændringer. Denne artikel forklarer, hvordan du løser dette problem med de nye CSS-funktioner som f.eks calc-size(), interpolate-size, @starting-style og transition-behavior kan administreres.
Løsning med calc-size()
Hvis man har et DOM-element, der kommer fra en lukket tilstand (height: 0) til en åben tilstand (height: auto) går over, udføres animationen normalt ikke, selvom den transitionEgenskab er indstillet. Det er fordi browsere ikke understøtter overgange til iboende størrelser som f.eks auto støtte. Den nye calc-size()Funktion muliggør dog beregninger på disse iboende størrelser og dermed også overgange:
f95f6dcb193aa903adc84ce47bc4a296
De calc-size()-Funktion er endnu ikke tilgængelig i alle browsere. Et fallback kan opnås ved at beholde originalen height: auto-Erklæring kan opnås.
Løsning med interpolate-size
De interpolate-sizeEgenskab giver dig mulighed for at indstille interpolationsadfærd for browsere og beslutte, om du vil skelne mellem nøgleord som f.eks auto skal interpolere. Som standard sker interpolation kun mellem numeriske værdier. Med allow-keywords Du kan dog aktivere overgange mellem søgeord:
f95f6dcb193aa903adc84ce47bc4a296
Af dig interpolate-size: allow-keywords på :rootElement, aktiverer du den nye adfærd for hele siden.
Overgang fra display:none
Et andet problem opstår, når et element af display:none overgange til en synlig tilstand. Der display er ikke en animerbar egenskab, der forekommer ingen animation. De nye CSS-funktioner hjælper her @starting-style og transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Med transition-behavior: allow-discrete sikrer, at animationen udføres før display-værdi af block på none er skiftet. Disse regler gør det muligt at udføre overgange selv under en indledende stilopdatering. De @starting-styleRegel sikrer, at animationen kører korrekt ved en indledende stilopdatering.
Browser support
I øjeblikket de nye ejendomme calc-size() og interpolate-size endnu ikke understøttet af alle browsere. I Chrome er de tilgængelige bag et eksperimentflag, men endnu ikke i Safari og Firefox. Ligeledes støtte til transition-behavior Til stede i Chrome og Edge, men ikke i Safari og Firefox. Det vil forhåbentlig ændre sig i fremtiden.