Categoria

transition-behavior

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

Smettila di sprecare tempo con JavaScript: i popover moderni si fanno (anche) in CSS

I popover non sono più un esercizio obbligatorio di JavaScript. Oggi il browser offre un’API nativa: un bottone che apre/chiude, light dismiss, ESC, gestione del focus e stati CSS da animare. In questo articolo vediamo un’implementazione minimale e pulita, con fade e slide controllati da CSS, inclusa la transizione per proprietà discrete e un accenno al posizionamento vicino al trigger tramite anchoring.