Deci, ați dori să animați proprietatea de afișare

Grupul de lucru CSS a dat cu degetul mare în sus acum câteva săptămâni. Propunerea conceptuală super-duper fiind că putem anima sau trece de la, să zicem, display: block la display: none.

Este un pic cam năucitor să raționezi pentru că setarea display: none pe un element anulează animațiile. Și adăugarea acestuia repornește animațiile. Conform specificațiilor:

Setarea display proprietate pentru none va termina orice animație de rulare aplicată elementului și descendenților acestuia. Dacă un element nu are afișare, se actualizează afișarea la o altă valoare decât none va porni toate animațiile aplicate elementului de către animation-name proprietate, precum și toate animațiile aplicate descendenților cu display altele decât none.

Acest comportament circular este ceea ce face ca conceptul să pară mort la sosire. Dar if @keyframes a susținut orice display valoare altele decât none, atunci nu ai cum none pentru a anula sau reporni lucrurile. Asta dă non-none prioritatea valorilor, permițând none să-și facă treaba numai după ce animația sau tranziția s-a încheiat.

a lui Miriam claxona (așa le numim cu adevărat, nu?) explică cum ar putea funcționa:

Nu interpolăm tocmai între, să zicem, block și none, dar permițând block să rămână intactă până când lucrurile se opresc în mișcare și este sigur de aplicat none. Acestea sunt cuvinte cheie, deci nu există valori explicite între cele două. Ca atare, aceasta rămâne o animație discretă. Comutăm între două valori odată ce acea animație este finalizată.

Aceasta este Robert Flackexemplul lui extras direct din discutia:

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

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

Acesta este un exemplu util, deoarece arată modul în care primul cadru setează elementul display: block, căruia i se acordă prioritate față de subiacent display: none ca non-none valoare. Acest lucru permite animației să ruleze și să se termine fără none anularea sau resetarea acestuia în proces, deoarece se rezolvă doar după animația.

Acesta este exemplul la care a făcut referire Miriam pe Mastodon:

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

De data aceasta avem de-a face cu o tranziție. Subiacentul display valoarea este setată la none înainte să se întâmple ceva, deci este complet în afara fluxului de documente. Acum, dacă ar fi să facem tranziția asta la hover, poate așa:

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

… atunci elementul ar trebui teoretic să dispară la 200ms. Din nou, comutăm între display valori, dar block are prioritate, astfel încât tranziția nu este anulată în avans și este aplicată de fapt după opacity își încheie tranziția.

Cel puțin așa citește mintea mea în asta. Mă bucur că există oameni super inteligenți care se gândesc la aceste lucruri pentru că îmi imaginez că sunt o grămadă de rezolvat. De exemplu, ce se întâmplă dacă mai multe animații sunt alocate unui element - va none resetați sau anulați oricare dintre acestea? Sunt sigur că totul, de la animații infinite, direcții inversate și tot felul de alte lucruri, vor fi abordate în timp.

Dar ce prim pas super tare!