A CSS-átmenetek nagyszerű módja az interaktivitás megteremtésének. elég, transition egy elem kezdeti állapotába, és a böngésző animálja a két állapot közötti átmenetet. Átmenetek belső elemméretekhez, mint pl auto Ez azonban évtizedek óta problémát jelentett a webfejlesztőknek, és az egyetlen lehetőség a magasság dinamikus kiszámítása volt JavaScript segítségével.
Egy másik kihívás az átmenetek elindítása, amikor egy elem megkapja az első stílusát – például amikor hozzáadják a DOM-hoz, vagy amikor display-értéke none változásokat. Ez a cikk elmagyarázza, hogyan lehet megoldani ezt a problémát az új CSS-funkciókkal, például calc-size(), interpolate-size, @starting-style és transition-behavior kezelhető.
Megoldással calc-size()
Ha van egy zárt állapotból származó DOM elem (height: 0) nyitott állapotba (height: auto) átmegy, az animáció általában nem kerül végrehajtásra, pedig a transitionTulajdonság be van állítva. Ennek az az oka, hogy a böngészők nem támogatják az olyan belső méretekre való átállást, mint pl auto támogatás. Az újat calc-size()A funkció azonban lehetővé teszi ezekre a belső mennyiségekre vonatkozó számításokat és így az átmeneteket is:
f95f6dcb193aa903adc84ce47bc4a296
A calc-size()- A funkció még nem érhető el minden böngészőben. A visszaesés az eredeti megtartásával érhető el height: auto-A nyilatkozatot el lehet érni.
Megoldással interpolate-size
A interpolate-sizeTulajdonság lehetővé teszi a böngészők interpolációs viselkedésének beállítását, és annak eldöntését, hogy különbséget tesz-e az olyan kulcsszavak között, mint pl auto interpolálnia kell. Alapértelmezés szerint az interpoláció csak a numerikus értékek között történik. Vel allow-keywords Azonban engedélyezheti a kulcsszavak közötti átmenetet:
f95f6dcb193aa903adc84ce47bc4a296
Ön által interpolate-size: allow-keywords a :rootElemet, akkor aktiválja az új viselkedést a teljes oldalra vonatkozóan.
Áttérés innen display:none
Egy másik probléma akkor merül fel, ha egy eleme display:none látható állapotba lép át. Ott display nem animálható tulajdonság, nem történik animáció. Ebben segítenek az új CSS-funkciók @starting-style és transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Val vel transition-behavior: allow-discrete biztosítja, hogy az animáció a display-értéke block -on none át van kapcsolva. Ezek a szabályok lehetővé teszik az átmenetek végrehajtását még a kezdeti stílusfrissítés során is. A @starting-styleSzabály biztosítja, hogy az animáció megfelelően fusson a kezdeti stílusfrissítéskor.
Böngésző támogatás
Jelenleg az új ingatlanok calc-size() és interpolate-size még nem támogatja minden böngésző. A Chrome-ban elérhetők egy kísérleti zászló mögött, de a Safariban és a Firefoxban még nem. Hasonlóképpen, támogatást transition-behavior Megjelenik a Chrome-ban és az Edge-ben, de nem a Safariban és a Firefoxban. Remélhetőleg ez változni fog a jövőben.