Können CSS-Animationen mit Elementen funktionieren, die auf „display: none' eingestellt sind?

CSS-Animation und Anzeigeelemente

Sie haben versucht, eine CSS-Animation mit einem Element zu verwenden, das ursprünglich display: none hat. Während dies wie ein einfacher Ansatz zum dynamischen Ein- und Ausblenden von Elementen erscheinen mag, verhindern CSS-Einschränkungen dies.

Das Problem mit der Anzeige: keine

CSS-Animationen können keine Übergänge dazwischen verarbeiten display: none und display: block oder zwischen height: 0 und height: auto. Sie müssen die Höhe nach Möglichkeit fest codieren, andernfalls wäre die Verwendung von JavaScript erforderlich.

Höhe festlegen

In Situationen, in denen eine feste Codierung der Höhe nicht möglich ist, können Sie einen Überlauf verwenden : versteckt, um das Element zu verbergen und seine Höhe auf 0 zu setzen. Wenn Sie bereit sind, es anzuzeigen, setzen Sie den Überlauf wieder auf sichtbar und animieren Sie die Höhe vollständig Ausmaß.

Beispielcode

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from { height: 0; }
  to { height: 300px; }
}

HTML:

<div>

In diesem Beispiel Überlauf: Hidden stellt sicher, dass das Element verborgen bleibt, da seine Höhe von 0 auf animiert wird 300px.

Hinweis: Das CSS-Beispiel verwendet Vanilla-CSS. Wenn Sie Animate.css verwenden, können Sie die @keyframes-Regel durch die entsprechende Animate.css-Klasse ersetzen.

Mit diesem Ansatz können Sie Elemente reibungslos animieren, ohne auf display:none oder jQuery angewiesen zu sein, was für sanftere Übergänge sorgt und präzisere Timing-Kontrolle.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Animationen mit Elementen funktionieren, die auf „display: none' eingestellt sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!