Le transizioni CSS sono un buon modo per creare interattività., transition allo stato iniziale di un elemento e il browser anima la transizione tra i due stati. Le transizioni per le variabili intrinseche dell'elemento, come ad esempio auto sono stati un problema per gli sviluppatori web per decenni e l'unica opzione era quella di calcolare l'altezza dinamicamente utilizzando JavaScript.
Un'altra sfida consiste nell'avviare le transizioni quando un elemento riceve il suo primo stile, ad esempio quando viene aggiunto al DOM o quando l'elemento display-valore di none Questo articolo spiega come questo problema possa essere risolto con le nuove funzioni CSS, come ad esempio calc-size(), interpolate-size, @starting-style e transition-behavior può essere padroneggiato.
Soluzione con calc-size()
Se si ha un elemento DOM che parte da uno stato chiuso (height: 0) a uno stato aperto (height: auto), l'animazione di solito non viene eseguita, anche se l'opzione transition-Questo perché i browser non impostano transizioni a variabili intrinseche come auto Il nuovo calc-size()-consente di effettuare calcoli su queste variabili intrinseche e quindi anche sulle transizioni.:
f95f6dcb193aa903adc84ce47bc4a296
Il calc-size()-non è ancora disponibile in tutti i browser. Si può ottenere un fallback mantenendo la funzione originale height: auto-Dichiarazione.
Soluzione con interpolate-size
Il interpolate-size-consente di definire il comportamento di interpolazione dei browser e di decidere se utilizzarli o meno tra parole chiave quali auto Per impostazione predefinita, l'interpolazione avviene solo tra valori numerici. allow-keywords Tuttavia, è possibile attivare le transizioni tra le parole chiave:
f95f6dcb193aa903adc84ce47bc4a296
Da interpolate-size: allow-keywords al :root-si attiva il nuovo comportamento per l'intera pagina.
Transizione da display:none
Un altro problema si verifica quando un elemento di display:none a uno stato visibile. display non è una proprietà animabile, non c'è alcuna animazione. Le nuove funzioni CSS aiutano in questo senso @starting-style e transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Insieme a transition-behavior: allow-discrete assicura che l'animazione venga eseguita prima dell'elemento display-valore di block su none Queste regole consentono di eseguire le transizioni anche durante l'aggiornamento iniziale dello stile. @starting-style-assicura che l'animazione venga eseguita correttamente durante il primo aggiornamento dello stile.
Supporto del browser
Le nuove proprietà sono attualmente in fase di calc-size() e interpolate-size non sono ancora supportati da tutti i browser. In Chrome sono disponibili dietro un flag di esperimento, ma non ancora in Safari e Firefox. Supporto per transition-behavior in Chrome ed Edge, ma non in Safari e Firefox, cosa che si spera cambierà in futuro.