Warum funktioniert der CSS3-Übergang nicht mit der Display-Eigenschaft?

CSS3-Übergang funktioniert nicht mit der Anzeigeeigenschaft

In CSS definiert die Anzeigeeigenschaft, ob ein Element angezeigt wird oder nicht. Wenn ein Element auf display:none eingestellt ist, wird es aus dem Dokumentfluss entfernt, d. h. es nimmt keinen Platz ein und ist nicht sichtbar. Dies macht es unmöglich, CSS-Übergänge zu verwenden, um das Erscheinen oder Verschwinden eines Elements mit display: none zu animieren.

Um einen sanften Einblendeffekt für ein ausgeblendetes Element zu erzielen, sollte die display-Eigenschaft nicht verwendet werden. Stattdessen kann die Eigenschaft opacity verwendet werden, um die Transparenz des Elements zu ändern. Der folgende CSS-Code demonstriert, wie man die opacity-Eigenschaft verwendet, um einen Einblendeffekt zu erzeugen:

#header #button:hover .content {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s; /* Vendor prefixes omitted for brevity. */
}

#header #button .content {
  opacity:0;
}

In diesem Code wird die Deckkraft des ausgeblendeten Elements auf 0 gesetzt, wenn das #header #button-Element vorhanden ist nicht darüber geschwebt. Wenn Sie mit der Maus über das #header #button-Element fahren, wird die Deckkraft des ausgeblendeten Elements auf 1 gesetzt, wodurch es mit einem sanften Einblendeffekt angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der CSS3-Übergang nicht mit der Display-Eigenschaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!