Tranzițiile CSS sunt o modalitate excelentă de a crea interactivitate. E de ajuns, transition la starea inițială a unui element, iar browserul animă tranziția dintre cele două stări. Tranziții pentru dimensiunile elementelor intrinseci precum auto Cu toate acestea, au fost o problemă pentru dezvoltatorii web de zeci de ani, iar singura opțiune a fost să calculeze înălțimea în mod dinamic folosind JavaScript.
O altă provocare este începerea tranzițiilor atunci când un element primește primul stil - cum ar fi atunci când este adăugat în DOM sau când display-valoarea none schimbari. Acest articol explică cum să rezolvi această problemă cu noile funcții CSS, cum ar fi calc-size(), interpolate-size, @starting-style și transition-behavior poate fi gestionat.
Solutie cu calc-size()
Dacă cineva are un element DOM care provine dintr-o stare închisă (height: 0) într-o stare deschisă (height: auto) trece, animația nu este de obicei executată, chiar dacă transitionProprietatea este stabilită. Asta pentru că browserele nu acceptă tranziții la dimensiuni intrinseci, cum ar fi auto sprijin. Cel nou calc-size()Funcția, totuși, permite calcule pe aceste mărimi intrinseci și, prin urmare, și tranziții:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-Funcția nu este încă disponibilă în toate browserele. O alternativă poate fi realizată prin păstrarea originalului height: auto-Declarația poate fi realizată.
Solutie cu interpolate-size
The interpolate-sizeProprietatea vă permite să setați comportamentul de interpolare al browserelor și să decideți dacă să faceți distincția între cuvinte cheie, cum ar fi auto ar trebui să interpoleze. În mod implicit, interpolarea are loc numai între valori numerice. Cu allow-keywords Cu toate acestea, puteți activa tranzițiile între cuvintele cheie:
f95f6dcb193aa903adc84ce47bc4a296
De către tine interpolate-size: allow-keywords pe :rootElement, activați noul comportament pentru întreaga pagină.
Tranziție de la display:none
O altă problemă apare atunci când un element de display:none trece la o stare vizibilă. Acolo display nu este o proprietate animabilă, nu are loc nicio animație. Noile funcții CSS ajută aici @starting-style și transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Cu transition-behavior: allow-discrete se asigură că animația rulează înainte de display-valoarea block pe none este comutat. Aceste reguli permit executarea tranzițiilor chiar și în timpul unei actualizări inițiale de stil. The @starting-styleRegula asigură că animația rulează corect la o actualizare inițială a stilului.
Suport pentru browser
În prezent, noile proprietăți calc-size() și interpolate-size nu este încă acceptat de toate browserele. În Chrome, acestea sunt disponibile în spatele unui steag de experiment, dar nu încă în Safari și Firefox. La fel, sprijin pentru transition-behavior Prezent în Chrome și Edge, dar nu în Safari și Firefox. Sperăm că asta se va schimba în viitor.