Categoria

starting-style

3 articoli associati a questo tag.

22 luglio 2026

Animare l’entrata/uscita da display: none in CSS (finalmente)

Per anni il limite era chiaro: display è una proprietà “discreta” e non si poteva transizionare. Oggi si può gestire in modo pulito l’apertura e la chiusura di elementi che passano da display: none a display: grid/block, ottenendo animazioni complete (anche diverse tra enter e exit) grazie a transition-behavior: allow-discrete e alla nuova at-rule @starting-style. Ecco come impostare modali, popover e pannelli con un CSS chiaro e prevedibile, includendo anche l’animazione del backdrop.

16 luglio 2026

Animare l’apertura/chiusura da display: none senza hack: transition-behavior e @starting-style

Per anni abbiamo aggirato l’impossibilità di animare display: none con wrapper, max-height, visibility e setTimeout. Oggi il CSS offre un approccio più pulito: con transition-behavior: allow-discrete e @starting-style puoi gestire l’ingresso/uscita di elementi che cambiano display (e persino overlay per i componenti in top-layer come popover e modali), ottenendo animazioni coerenti in apertura e in chiusura.

1 luglio 2026

Popover nativi in HTML con animazioni fluide (senza JavaScript)

I popover nativi sono finalmente pratici: si attivano con un attributo sul bottone, si chiudono con click esterno o Esc, finiscono nel “top layer” (niente lotte di z-index) e possono essere animati in modo credibile anche se partono da display:none. In questo articolo vediamo come collegarli, come evitare i gotcha dei CSS di default, come posizionarli vicino al trigger con anchor positioning (progressive enhancement) e come ottenere transizioni diverse tra apertura e chiusura grazie a @starting-style e transition-behavior: allow-discrete.