Sie möchten also die Anzeigeeigenschaft animieren

Die CSS-Arbeitsgruppe gab dem vor ein paar Wochen einen Daumen nach oben. Der super-duper konzeptionelle Vorschlag ist, dass wir animieren oder übergehen können, sagen wir, display: block zu display: none.

Es ist ein bisschen wie ein Denksport, darüber nachzudenken, weil die Einstellung display: none auf einem Element bricht Animationen ab. Und wenn Sie es hinzufügen, werden Animationen neu gestartet. Gemäß der Spezifikation:

Einstellen der display Eigentum zu none beendet jede laufende Animation, die auf das Element und seine Nachkommen angewendet wird. Wenn ein Element die Anzeige „none“ hat, wird die Anzeige auf einen anderen Wert als aktualisiert none startet alle Animationen, die auf das Element angewendet wurden animation-name -Eigenschaft, sowie alle Animationen, die auf Nachkommen mit angewendet werden display ausgenommen none.

Dieses kreisförmige Verhalten macht das Konzept bei der Ankunft scheinbar tot. Aber if @keyframes unterstützt alle display Wert ausgenommen none, dann gibt es keine Möglichkeit für none Dinge abzubrechen oder neu zu starten. Das gibt nicht-none Werte Priorität, zulassen none seine Sache erst zu erledigen, nachdem die Animation oder der Übergang abgeschlossen ist.

Miriams blasen (so nennen wir sie wirklich, richtig?) erklärt, wie das funktionieren könnte:

Wir interpolieren nicht genau zwischen, sagen wir, block und none, aber erlauben block intakt zu bleiben, bis sich die Dinge nicht mehr bewegen und es sicher anzuwenden ist none. Dies sind Schlüsselwörter, daher gibt es keine expliziten Werte zwischen den beiden. Als solches bleibt dies eine diskrete Animation. Wir schalten zwischen zwei Werten um, sobald diese Animation abgeschlossen ist.

Dies ist die Robert Flack's Beispiel direkt aus gezogen die Diskussion:

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

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

Dies ist ein hilfreiches Beispiel, da es zeigt, wie der erste Rahmen das Element einstellt display: block, die Vorrang vor dem Basiswert hat display: none als Nicht-none Wert. Dadurch kann die Animation ohne ausgeführt und beendet werden none Abbrechen oder Zurücksetzen im Prozess, da es nur aufgelöst wird nachdem die Animation.

Dies ist das Beispiel, auf das Miriam auf Mastodon verwiesen hat:

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

Diesmal haben wir es mit einem Übergang zu tun. Das zugrunde liegende display Wert ist auf eingestellt none bevor etwas passiert, so dass es vollständig aus dem Dokumentenfluss heraus ist. Nun, wenn wir das beim Hover umstellen würden, vielleicht so:

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

…dann müsste das Element theoretisch bei einblenden 200ms. Auch hier wechseln wir zwischen display Werte, aber block wird Priorität eingeräumt, sodass der Übergang nicht im Voraus abgebrochen und danach tatsächlich angewendet wird opacity beendet seinen Übergang.

So liest es zumindest mein Verstand. Ich bin froh, dass es superkluge Leute gibt, die diese Dinge durchdenken, weil ich mir vorstelle, dass es eine Menge zu klären gibt. Was passiert beispielsweise, wenn einem Element mehrere Animationen zugewiesen werden – wird none eines davon zurücksetzen oder stornieren? Ich bin mir sicher, dass alles von unendlichen Animationen, umgekehrten Richtungen und allen möglichen anderen Dingen rechtzeitig angegangen wird.

Aber was für ein super cooler erster Schritt!