@starting-style (Animații de Intrare din display: none) în CSS

Timp de decenii, una dintre cele mai frustrante limitări din CSS a fost imposibilitatea de a anima un element care trece din starea display: none în display: block. Pentru a crea un meniu sau un dialog care apare lin (fade-in), dezvoltatorii trebuiau să recurgă la trucuri cu setTimeout în JavaScript sau să manipuleze clase intermediare.

Noua regulă @starting-style permite definirea stării inițiale (starea „înainte de afișare”) de la care browserul va porni tranziția în momentul în care elementul devine vizibil pentru prima dată în fluxul de randare.

/* 1. Starea activă a dialogului când este deschis */
dialog[open] {
    opacity: 1;
    transform: scale(1);
    
    /* Activează tranziția pe proprietățile de opacitate, transformare și display */
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}

/* 2. Starea de plecare când elementul trece din 'închis' în 'deschis' */
@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* 3. Starea de ieșire la închidere */
dialog {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}

Cuvântul cheie allow-discrete

Pentru a permite animarea proprietăților discrete (precum display sau visibility), trebuie să adaugi valoarea allow-discrete în declarația transition. Aceasta îi transmite browserului să comute valoarea lui display: none abia după ce animația vizuală s-a încheiat complet.