Sie möchten also das Display -Immobilie animieren

Animierung der Eigenschaft display: Eine CSS -Revolution?

Die CSS -Arbeitsgruppe hat kürzlich einen Vorschlag genehmigt, der Animationen und Übergänge der Eigenschaft zulässt - eine bedeutende Entwicklung. Dies bedeutet, dass wir beispielsweise display und display: block. display: none

Dies ist eine einzigartige Herausforderung. Derzeit stoppt das Einstellen von

abrupt alle laufenden Animationen. Durch das Hinzufügen startet sie neu. Die Spezifikation verdeutlicht: Einstellen

endet Animationen; Ändern von display: none von display: none zu einem anderen Wert startet sie neu. display none Dieses scheinbar paradoxe Verhalten deutete zunächst darauf hin, dass der Vorschlag nicht verarbeitbar war. Der Schlüssel ist jedoch, dass

einen anderen Anzeigewert

als @keyframes priorisieren. Dies verhindert, dass die Animation unterbricht oder neu startet, bis sie vollständig abgeschlossen ist. none none Miriams Erklärung (nennen wir diese "Toots", sollen wir?) Erklärt den Prozess: Es geht nicht darum, zwischen

und

zu interpolieren, sondern zuzulassen, dass block bis zur Schlussfolgerung der Animation aktiv bleibt. Die Animation bleibt diskret; Wir schalten zwischen Zuständen none nach block die Animation ab. none Robert Flacks Beispiel zeigt Folgendes:

Der anfängliche Frame priorisiert

, überschreibt

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

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

und ermöglicht die Animation vor

wirksam. display: block display: none Miriams Mastodon -Beispiel verwendet Übergänge: none

Hier wird

zunächst eingestellt, wodurch das Element aus dem Dokumentfluss entfernt wird. Bei schweber wird der Wert

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

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

priorisiert, wodurch der Übergang nach Abschluss des Übergangs der Opazität ermöglicht wird.

display: none Während dies ein erheblicher Fortschritt ist, bleibt noch viel zu berücksichtigen. Die Interaktion mit mehreren Animationen, unendlichen Animationen, umgekehrten Animationen usw. erfordert eine weitere Überlegung. Trotzdem ist dies ein bahnbrechender Schritt nach vorne! block

Das obige ist der detaillierte Inhalt vonSie möchten also das Display -Immobilie animieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!