Wie animiere ich ein verstecktes Element in CSS?

CSS-Animation und -Anzeige: Keine

In CSS ist das Animieren ausgeblendeter Elemente (z. B. Anzeige: Keine) nicht einfach. Beim Festlegen von display: none wird ein Element aus dem Dokumentfluss entfernt, es belegt jedoch weiterhin Platz. Um dieses Problem zu beheben:

1. Legen Sie eine feste Höhe fest:

Da Sie zwischen display: none und display: block keine Animationen durchführen können, legen Sie die Anfangshöhe des ausgeblendeten Elements auf die Höhe fest, die es einnehmen wird, wenn es angezeigt wird.

CSS:

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2. Verwenden Sie einen Animations-Keyframe:

Definieren Sie einen Animations-Keyframe, der das Element von einer Höhe von 0 auf die gewünschte Höhe überführt.

CSS:

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3. Wenden Sie die Animation an:

Verknüpfen Sie den Animations-Keyframe mit dem ausgeblendeten Element.

CSS:

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

Jetzt das ausgeblendete Element gleitet nahtlos nach unten in die Ansicht, ohne dass das Layout anderer Elemente darauf beeinträchtigt wird Seite.

Hinweis: Dieser Ansatz funktioniert, wenn Sie eine feste Höhe für das ausgeblendete Element haben. Für dynamische Höhen müssen Sie möglicherweise jQuery oder JavaScript verwenden.

Das obige ist der detaillierte Inhalt vonWie animiere ich ein verstecktes Element in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!