Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich ein Div mit „display: none' in CSS animieren?

Wie kann ich ein Div mit „display: none' in CSS animieren?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-12 20:40:02575Durchsuche

How Can I Animate a Div with `display: none` in CSS?

CSS-Animation und Anzeige Keine

Wenn Sie versuchen, ein Div mithilfe von CSS zu animieren, ist es wichtig, die Einschränkungen der Anzeigeeigenschaft zu verstehen. Während die Anzeige: keine; Die Eigenschaft kann ein Element aus der Ansicht ausblenden, sie entfernt es jedoch nicht aus dem Dokumentfluss. Dies kann zu Problemen beim Animieren von Elementen führen, die Platz auf der Seite beanspruchen.

Um den gewünschten Effekt zu erzielen, können Sie das Haupt-Div nicht direkt von display: none; anzeigen: block;. Stattdessen müssen Sie die Höhe des Haupt-Div auf 0 setzen und overflow:hidden; um es zunächst zu verbergen. Wenn es dann an der Zeit ist, dass das Haupt-Div eingeschoben wird, können Sie die Höhe des Div auf den gewünschten Wert animieren.

Hier ist ein Beispiel:

#main-div {
    height: 0;
    overflow: hidden;
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#main-div.fadeInDownBig {
    height: 375px;
}

Dies führt dazu, dass das Haupt-Div nach 3,5 Sekunden eingeblendet wird und die anderen Divs beim Eintritt in das Ansichtsfenster auf der Seite nach unten geschoben werden.

Beachten Sie, dass diese Technik auch mit anderen Attributen wie der Deckkraft funktioniert. Sie könnten beispielsweise ein Div einblenden, indem Sie seine Deckkraft schrittweise von 0 auf 1 erhöhen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div mit „display: none' in CSS animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn