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

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>

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!