Ora in base di riferimento: animazione degli effetti dei contenuti di ingresso

Una Kravets

Nel post sulle quattro nuove funzionalità CSS per gli effetti di ingresso e uscita sono state illustrate alcune utili funzionalità che erano appena disponibili in Chrome. Ora, due di queste funzionalità, @starting-style e transition-behavior: allow-discrete sono diventate Baseline Newly Disponibile con il rilascio di Firefox 129. Ora puoi creare effetti di animazione per gli elementi, inclusi quelli con animazioni da display: none e per l'animazione nel livello superiore.

Configurazione degli effetti per le voci in corso con @starting-style

La regola @starting-style definisce gli stili iniziali di un elemento prima che venga visualizzato nella pagina. Questa operazione è necessaria per gli elementi che si animano a partire da display: none, in quanto richiedono uno stato in cui eseguire l'animazione.

Utilizza @starting-style come qualsiasi altra regola at-rule in CSS, inserendo al suo interno gli stili dell'elemento. Ad esempio, con una <dialog>, posiziona gli stili dialog[open] all'interno di una regola @starting-style. Questi sono gli stili utilizzati prima dell'apertura della finestra di dialogo.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Attivazione di animazioni discrete con allow-discrete

La seconda cosa necessaria per supportare le animazioni delle voci per gli elementi che si animano da display: none, come finestre di dialogo e popover, è l'attivazione di una nuova modalità di animazione per supportare l'animazione di proprietà discrete. Le proprietà discrete sono quelle che non possono interpolare tra valori. Puoi pensare a tutte queste funzionalità come a un interruttore on/off. Alcuni esempi sono display, visibility, mix-blend-mode, qualsiasi proprietà in cui la caratteristica corrisponde a un valore o a un altro. Con questa nuova modalità di animazione, il browser ora supporta lo scambio dei valori nel punto 50% anziché nel punto 0% di una transizione.

Usa uno dei seguenti due modi per animare gli effetti di voce per gli elementi display: none e visibility: hidden:

• La proprietà autonoma transition-behavior con il valore allow-discrete.
• Il valore allow-discrete nella forma abbreviata della transizione.

Consigliamo il secondo metodo, perché l'applicazione di transition-behavior è inclusa nell'abbreviazione transition. Se applichi transition-behavior: allow-discrete prima dell'abbreviazione della transizione al punto in cui applichi le funzioni di transizione, temporizzazione e easing, il browser ignorerà il transition-behavior.

Se la utilizzi in forma breve, devi applicare la parola chiave allow-discrete solo alle proprietà specifiche che richiedono animazioni discrete. Ciò è dimostrato nel seguente CSS che esegue la transizione sia della proprietà translate che della proprietà display, ma applica solo la parola chiave allow-discrete alla proprietà display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demo: panoramica

L'utilizzo di queste funzionalità è particolarmente utile per gli elementi di primo livello, come l'elemento <dialog> o i componenti che utilizzano l'attributo popover. Nell'esempio seguente, un elemento <dialog> viene animato dalla parte inferiore dell'area visibile (inizialmente con una traslazione verticale di 100 Vh fuori schermo) al centro dell'area visibile, rimuovendo la traduzione quando <dialog> è aperto.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Puoi scrivere questo testo in modo più conciso con la nidificazione CSS, che è una nuova funzionalità di base disponibile di recente.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Conclusione

È entusiasmante vedere progressi come questo risultato nella Baseline e, per lo meno, è un bel miglioramento progressivo per questi elementi. Senza queste funzionalità dell'effetto di ingresso, gli elementi che si animano nel livello superiore o da uno stile display: none verranno semplicemente visualizzati nella tua pagina senza la transizione, come fanno attualmente.

Per scoprire come aggiungere effetti di uscita progressivamente migliorati, consulta l'articolo "Quattro nuove funzionalità CSS per animazioni di entrata e uscita fluide". Per saperne di più su queste funzionalità, consulta le seguenti risorse della documentazione:

• @starting-style su MDN
• comportamento-transizione su MDN