Wie animiere ich ein Div mit Display: None und verwende nur CSS?

CSS-Animation mit Anzeige: Kein Dilemma

Bei der Arbeit mit CSS-Animationen kann es vorkommen, dass später ein Div eingefügt werden soll während andere Elemente zunächst seinen Raum füllen. Wenn Sie das animierte Div jedoch auf „display: none“ einstellen, belegt es weiterhin Platz und verhindert, dass die anderen Elemente ordnungsgemäß fließen.

Um dieses Problem zu beheben, müssen Sie sicherstellen, dass das animierte Div nicht angezeigt wird. Es nimmt keinen Platz ein, bis es zum vorgesehenen Zeitpunkt erscheint. Während Sie die Verwendung von jQuery in Betracht ziehen könnten, konzentriert sich dieser Artikel auf eine reine CSS-Lösung für ein reibungsloseres und kontrolliertes Timing.

Hardcodierung der Höhe

Der Schlüssel liegt in der Hardcodierung der Höhe von die animierte div. Auf diese Weise reserviert es den nötigen Platz, ohne sich selbst sichtbar zu machen. Sie können dann CSS-Animationen verwenden, um die Höhe im richtigen Moment zu ändern.

Betrachten Sie beispielsweise den folgenden Code:

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

Animation mit Keyframes

Sobald die Höhe festgelegt ist, können Sie die Änderung mithilfe von Keyframes animieren. Hier ist ein Beispiel:

#main-image.fadeInDownBig {
    height: 300px;
}

In diesem Beispiel wird die fadeInDownBig-Klasse zum gewünschten Zeitpunkt auf das Hauptbild-Div angewendet, wodurch der Übergang zur beabsichtigten Höhe ausgelöst wird.

Browser-Unterstützung und Demo

Diese reine CSS-Lösung funktioniert gut in modernen Browsern. Sie können eine Live-Demo unter folgendem Link ansehen:

• http://jsfiddle.net/duopixel/qD5XX/

Indem Sie dies verwenden Mit dieser Technik können Sie reibungslose CSS-Animationen ohne die Fallstricke von display:none erzielen und so sicherstellen, dass Ihre Divs nahtlos wie beabsichtigt fließen.

Das obige ist der detaillierte Inhalt vonWie animiere ich ein Div mit Display: None und verwende nur CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!