Quindi, ti piacerebbe animare la proprietà display

Il gruppo di lavoro CSS ha dato un pollice in su un paio di settimane fa. La proposta concettuale super-duper è che possiamo animare o passare da, diciamo, display: block a display: none.

È un po 'un rompicapo su cui ragionare perché ambientazione display: none su un elemento annulla le animazioni. E aggiungendolo riavvia le animazioni. Secondo le specifiche:

Impostazione del display proprietà a none terminerà qualsiasi animazione in esecuzione applicata all'elemento e ai suoi discendenti. Se un elemento ha una visualizzazione di none, aggiornare la visualizzazione a un valore diverso da none avvierà tutte le animazioni applicate all'elemento dal animation-name proprietà, così come tutte le animazioni applicate ai discendenti con display diverso none.

Quel comportamento circolare è ciò che rende il concetto apparentemente morto all'arrivo. Ma if @keyframes supportato qualsiasi display APPREZZIAMO diverso none, quindi non c'è modo per none per annullare o riavviare le cose. Che dà non-none valori priorità, permettendo none per fare la sua cosa solo dopo che l'animazione o la transizione è stata completata.

di Miriam colpo di clacson (questo è come li chiamiamo davvero, giusto?) spiega come potrebbe funzionare:

Non stiamo esattamente interpolando tra, diciamo, block ed none, ma permettendo block per rimanere intatto fino al momento in cui le cose smettono di muoversi ed è sicuro da applicare none. Queste sono parole chiave, quindi non ci sono valori espliciti tra i due. In quanto tale, questa rimane un'animazione discreta. Passiamo da un valore all'altro una volta che l'animazione è completa.

Questa è la Roberto Flackl'esempio tratto direttamente da la discussione:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Questo è un esempio utile perché mostra come il primo fotogramma imposta l'elemento display: block, che ha priorità sul sottostante display: none come nonnone valore. Ciò consente all'animazione di funzionare e terminare senza none annullandolo o reimpostandolo nel processo poiché si risolve solo dopo l'animazione.

Questo è l'esempio a cui fa riferimento Miriam su Mastodon:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

Questa volta abbiamo a che fare con una transizione. Il sottostante display il valore è impostato su none prima che accada qualcosa, quindi è completamente fuori dal flusso di documenti. Ora, se dovessimo eseguire la transizione al passaggio del mouse, forse in questo modo:

.hide:hover {
  display: block;
  opacity: 1;
}

...allora l'elemento dovrebbe teoricamente dissolversi a 200ms. Ancora una volta, stiamo alternando tra display valori, ma block ha la priorità in modo che la transizione non venga annullata in anticipo e venga effettivamente applicata dopo opacity termina la sua transizione.

Almeno è così che la mia mente ci sta leggendo. Sono contento che ci siano persone super intelligenti che pensano a queste cose perché immagino che ci sia un sacco da sistemare. Ad esempio, cosa succede se più animazioni vengono assegnate a un elemento: volontà none reimpostare o annullare qualcuno di questi? Sono sicuro che qualsiasi cosa, dalle animazioni infinite, alle direzioni invertite e ogni sorta di altre cose, verrà affrontata nel tempo.

Ma che bel primo passo!