Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum funktionieren CSS-Übergänge nicht mit der Visibility-Eigenschaft?

DDD
Freigeben: 2024-11-05 05:23:02
Original
664 Leute haben es durchsucht

Why Do CSS Transitions Fail To Work With the Visibility Property?

CSS-Übergänge und Sichtbarkeit: Eine trügerische Illusion

In CSS ermöglichen Übergänge reibungslose Animationen zwischen Eigenschaftszuständen. Beim Versuch, die Sichtbarkeit umzustellen, tritt jedoch ein rätselhaftes Problem auf, das Benutzer ratlos zurücklässt und sich fragt, ob es sich um einen Fehler handelt.

Der Fall des Sichtbarkeitsübergangs

Bedenken Sie den folgenden Code:

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>
Nach dem Login kopieren

Dieser Code zielt darauf ab, das Element mit der ID „inner“ anzuzeigen, wenn Sie mit der Maus über das Element mit der ID „outer“ fahren. Zu unserer Bestürzung verläuft der Übergang jedoch nicht wie erwartet. Anstelle eines sanften Übergangs schaltet die Sichtbarkeit nach einer Verzögerung, die der angegebenen Übergangsdauer entspricht, abrupt um.

Der Übeltäter

Die Hauptursache liegt in der Art der Sichtbarkeit Eigentum. Im Gegensatz zu Eigenschaften wie der Deckkraft, die kontinuierliche Werte (0-1) darstellen, liegt die Sichtbarkeit in einem binären Zustand vor (sichtbar oder ausgeblendet). Dieser grundlegende Unterschied erschwert Übergänge, da es keine zu interpolierenden Zwischenzustände gibt.

Übergangseigenschaften

Übergänge basieren auf der Berechnung von Keyframes zwischen zwei numerischen Werten. Bei der Opazität geht der Übergang sanft zwischen 0 und 1 über. Bei der Sichtbarkeit fehlt dem Übergang jedoch der nötige numerische Bereich zum Interpolieren.

Fazit

Während Dieses Verhalten ähnelt zunächst einem Fehler, ist jedoch eine inhärente Einschränkung von CSS-Übergängen. Nur Eigenschaften mit berechenbaren Werten können reibungslos animiert werden. Bei binären Eigenschaften wie Sichtbarkeit sind abrupte Zustandsänderungen unvermeidlich.

Das obige ist der detaillierte Inhalt vonWarum funktionieren CSS-Übergänge nicht mit der Visibility-Eigenschaft?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!