Warum funktioniert mein CSS3-Übergang nicht, wenn ich die Display-Eigenschaft verwende?

CSS3-Übergänge funktionieren nicht mit der Anzeigeeigenschaft

Übersicht

Dieser Artikel befasst sich mit dem Problem, dass CSS-Übergänge bei Verwendung der Anzeigeeigenschaft nicht ordnungsgemäß funktionieren. Es bietet Einblicke und alternative Lösungen, um das gewünschte Ziel zu erreichen.

Problemstellung

Das Ziel besteht darin, einen Effekt zu erzeugen, bei dem ein verstecktes Div sanft eingeblendet wird, wenn man mit der Maus über sein übergeordnetes Element fährt. Versuche, dies mithilfe von CSS-Übergängen zu implementieren, waren jedoch erfolglos und führten nur dazu, dass das versteckte Div ohne Übergänge angezeigt wurde.

Ursache

CSS-Übergänge können nicht auf Elemente angewendet werden, für die die Anzeigeeigenschaft festgelegt ist zu keinem. Dies liegt daran, dass display: none das Element vollständig aus dem Dokumentfluss entfernt und es somit für keinerlei Effekte verfügbar macht.

Alternative Lösung

Um den gewünschten Fading-Effekt zu erzielen, können wir stattdessen die Opazitätseigenschaft verwenden der Anzeige. Indem wir die Deckkraft des versteckten Divs manipulieren, können wir es nach und nach sichtbar machen, wenn wir mit der Maus darüber fahren.

Hier ist der aktualisierte CSS-Code:

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

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

In diesem Code wird die Deckkraft des versteckten Divs geändert ist zunächst auf 0 gesetzt und somit unsichtbar. Wenn Sie mit der Maus über die übergeordnete Schaltfläche fahren, geht die Deckkraft allmählich auf 1 über, wodurch das Div mit einem sanften Fading-Effekt sichtbar wird.

Schlussfolgerung

Durch Verständnis der Einschränkungen der Anzeigeeigenschaft und Implementierung einer alternativen Lösung Mithilfe der Deckkraft kann man beim Schweben den gewünschten Einblendübergang für ausgeblendete Elemente erzielen.

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