Warum funktioniert der CSS-Sichtbarkeitsübergang nicht wie die Deckkraft?

Übergangseffekte auf die CSS-Sichtbarkeit

Problemeinführung

Übergangseffekte werden in CSS häufig verwendet, um flüssige Animationen zu erstellen. Beim Übergang bestimmter Eigenschaften, wie z. B. der Sichtbarkeit, treten jedoch Probleme auf. In dieser Situation scheint der Übergang nicht wie erwartet zu funktionieren und das Verhalten unterscheidet sich von anderen Eigenschaften wie der Deckkraft.

Übergang bei Sichtbarkeit vs. Deckkraft

In Im bereitgestellten Beispiel wird ein Übergang auf die Sichtbarkeit und Deckkraft eines Elements angewendet:

Für Sichtbarkeit:

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

Für Deckkraft:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

Der Übergangseffekt Funktioniert wie erwartet hinsichtlich der Deckkraft, löst jedoch keine Sichtbarkeit aus. Trotz der Einstellung einer Übergangsdauer von 1000 ms wird keine Animation beobachtet.

Erklärung

Das beobachtete Verhalten ist kein Fehler, sondern ein Ergebnis der Art und Weise, wie Übergangseffekte implementiert werden CSS. Bei Übergängen werden Keyframes zwischen zwei Werten berechnet und Zwischenzustände animiert. Allerdings ist die Sichtbarkeit ein binärer Wert (sichtbar oder ausgeblendet), der keine numerischen Werte zwischen diesen Zuständen zulässt.

Daher wird die Übergangsdauer als Verzögerung interpretiert, bevor die Sichtbarkeitseigenschaft von ausgeblendet wechselt sichtbar (oder umgekehrt) beim Schweben. Diese Verzögerung imitiert den Effekt eines Übergangs, ist jedoch keine echte Animation im gleichen Sinne wie Deckkraftübergänge.

Übergangseigenschaften

Um reibungslose Animationen zu gewährleisten, sollten Übergänge auf Ordinaleigenschaften angewendet werden, die einen eindeutigen Start- und Endwert mit numerischen Werten haben. Eine Liste übertragbarer Eigenschaften finden Sie unter diesem Link:

[Link zur Referenz über übertragbare Eigenschaften]

Das obige ist der detaillierte Inhalt vonWarum funktioniert der CSS-Sichtbarkeitsübergang nicht wie die Deckkraft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!