Warum schlägt mein CSS3-Übergang fehl, wenn ich die Anzeigeeigenschaft ändere?

CSS3-Übergang funktioniert nicht mit der Anzeigeeigenschaft

Frage:

Warum funktioniert der CSS3-Übergang nicht, wenn die Anzeigeeigenschaft aktiviert ist? geändert wird?

Antwort:

Wenn die Anzeigeeigenschaft auf „none“ gesetzt ist, wird das gesamte Blockelement effektiv ausgeblendet, wodurch jegliche Übergangseffekte verhindert werden. Alternativ ermöglicht die Verwendung von Deckkraft Fade-Effekte und weichere Übergänge.

Alternative CSS-Lösung:

Um einen sanften Übergangseffekt zu erzielen, manipulieren Sie die Deckkraft-, Höhen- und Polsterungseigenschaften stattdessen:

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}

#header #button > .content {
  opacity: 0;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  transition: all .3s ease .15s;
}

Arbeitende Demo:

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

Zusätzliche Hinweise:

• Herstellerpräfixe wurden der Kürze halber weggelassen.
• Sie können auch erwägen, den Randradius anzupassen, um einen subtileren Übergangseffekt zu erzielen.
• Ähnliche Erkenntnisse finden Sie in dieser [SO-Diskussion](https://stackoverflow.com/questions/13691003/displaynone-css3-transition).

Das obige ist der detaillierte Inhalt vonWarum schlägt mein CSS3-Übergang fehl, wenn ich die Anzeigeeigenschaft ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!