Können CSS-Übergänge Elemente nach einer festgelegten Zeit automatisch ausblenden?

Elemente mithilfe von CSS-Übergängen automatisch ausblenden

Können Sie ein Element 5 Sekunden nach dem Laden einer Seite verschwinden lassen? Obwohl eine jQuery-Lösung bekannt ist, untersucht dieser Artikel, wie man mit CSS-Übergängen den gleichen Effekt erzielen kann.

Ist das möglich?

Ja, aber nicht auf herkömmliche Weise . Typischerweise werden Übergänge auf Eigenschaften wie Anzeige, Abmessungen oder Überlauf angewendet. Diese Eigenschaften steuern jedoch direkt die Sichtbarkeit und den Platzbedarf des Elements.

Innovative Lösung

Um diese Einschränkung zu umgehen, erstellen Sie eine Animation für das Zielelement. Schalten Sie die Sichtbarkeit nach 5 Sekunden auf „Ausgeblendet“ um. Setzen Sie außerdem die Höhe und Breite auf Null, um zu verhindern, dass es Platz im Dokumentenfluss einnimmt.

Beispielimplementierung

CSS:

#hideMe {
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

HTML:

<div>

Dies Der Code richtet eine Animation ein, die das Element 5 Sekunden nach dem Laden der Seite auf Null verkleinert. Das Element wird ausgeblendet, behält aber seine Position im Dokumentenfluss bei.

Fazit

Während der herkömmliche Ansatz zum Ausblenden von Elementen möglicherweise nicht direkt anwendbar ist, verwenden Sie Sichtbarkeitsumschaltung und Null Abmessungen in Verbindung mit CSS-Animationen bieten eine innovative Lösung zum automatischen Ausblenden von Elementen nach einem bestimmten Zeitintervall.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Übergänge Elemente nach einer festgelegten Zeit automatisch ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!