Heim > Web-Frontend > CSS-Tutorial > Warum funktioniert der CSS-Sichtbarkeitsübergang nicht wie die Deckkraft?

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

DDD
Freigeben: 2024-11-07 17:41:02
Original
369 Leute haben es durchsucht

Why Does CSS Visibility Transition Not Work Like Opacity?

Ü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;
}
Nach dem Login kopieren

Für Deckkraft:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage