Wie kann man in CSS eine Gleitanimation erstellen, wenn das animierte Element „display: none;' hat?

CSS-Animation in Verbindung mit Anzeige: Keine

Sie möchten eine CSS-Animation erstellen, bei der ein „Haupt-Div“ nach einem eingefügt wird angegebene Dauer, wodurch andere Divs auf seinem Weg nach unten gedrückt werden. Wenn Sie jedoch die Eigenschaft „display“ für „main-div“ auf „none“ setzen, wird verhindert, dass die Animation ausgelöst wird.

Um diese Einschränkung zu umgehen, können Sie nicht direkt zwischen „display: none;“ und „Anzeige: Block;“ oder zwischen „Höhe: 0;“ und „Höhe: automatisch“. Stattdessen müssen Sie die Höhe des Div manuell angeben.

Hier ist ein Beispiel mit Vanilla-CSS:

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

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

In diesem Code legen wir explizit die Höhe des „Hauptbilds“ fest. div zunächst auf 0 Pixel, wodurch es effektiv ausgeblendet wird. Der „Überlauf: versteckt;“ Die Eigenschaft verhindert, dass Inhalte über die angegebene Höhe hinauslaufen.

Dann verwenden wir CSS-Animationen, um einen reibungslosen Übergang von der anfänglichen Höhe von 0 zur gewünschten Höhe von 300 Pixeln zu ermöglichen. Die Eigenschaft „animation-delay“ stellt sicher, dass die Animation nach einer Verzögerung von 3,5 Sekunden startet.

Mit diesem Ansatz können Sie eine gleitende Animation erstellen, ohne „display: none;“ zu verwenden. unter Beibehaltung des reibungslosen Übergangs und des präzisen Timings, die CSS bietet.

Das obige ist der detaillierte Inhalt vonWie kann man in CSS eine Gleitanimation erstellen, wenn das animierte Element „display: none;' hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!