CSS-Übergang mit nicht funktionierender Sichtbarkeit

In der folgenden Geige habe ich einen Übergang zu Sichtbarkeit und Deckkraft separat. Letzteres funktioniert, Ersteres jedoch nicht. Darüber hinaus wird im Falle der Sichtbarkeit die Übergangszeit als Verzögerung beim Schweben interpretiert. Passiert sowohl in Chrome als auch in Firefox. Ist das ein Fehler?

http://jsfiddle.net/0r218mdo/3/

Fall 1:

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

Fall 2:

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

Dies ist kein Fehler - Sie können nur über ordinale / berechenbare Eigenschaften wechseln (eine einfache Möglichkeit, dies zu betrachten, ist jede Eigenschaft mit einem numerischen Start- und Endnummernwert, obwohl es einige Ausnahmen gibt).

Dies liegt daran, dass Übergänge funktionieren, indem Keyframes zwischen zwei Werten berechnet und eine Animation durch Extrapolation von Zwischenbeträgen erstellt werden.

visibility In diesem Fall handelt es sich um eine binäre Einstellung (sichtbar / ausgeblendet). Sobald die Übergangsdauer abgelaufen ist, wechselt die Eigenschaft einfach den Status. Sie sehen dies als Verzögerung. Sie kann jedoch tatsächlich als endgültiger Keyframe der Übergangsanimation mit dem angesehen werden Zwischen-Keyframes wurden nicht berechnet (was sind die Werte zwischen ausgeblendet / sichtbar? Deckkraft? Dimension? Da dies nicht explizit ist, werden sie nicht berechnet).

opacity ist eine Werteinstellung (0-1), sodass Keyframes über die angegebene Dauer berechnet werden können.

Eine Liste der übertragbaren (animierbaren) Eigenschaften finden Sie hier

Die Sichtbarkeit ist animierbar. Überprüfen Sie diesen Blog-Beitrag darüber: http://www.greywyvern.com/?post=337

Sie können es auch hier sehen: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Angenommen, Sie haben ein Menü, das Sie mit dem Mauszeiger ein- und ausblenden möchten. Wenn Sie opacity:0nur verwenden, ist Ihr transparentes Menü weiterhin vorhanden und wird animiert, wenn Sie den Mauszeiger über den unsichtbaren Bereich bewegen. Wenn Sie jedoch hinzufügen visibility:hidden, können Sie dieses Problem beheben:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Die Sichtbarkeit ist eine animierbare Eigenschaft gemäß der Spezifikation, aber Übergänge bei der Sichtbarkeit funktionieren nicht wie erwartet allmählich. Stattdessen verzögern Übergänge bei der Sichtbarkeit das Ausblenden eines Elements. Andererseits funktioniert es sofort, ein Element sichtbar zu machen. Dies ist so, wie es durch die Spezifikation definiert ist (im Fall der Standard-Timing-Funktion) und wie es in den Browsern implementiert ist.

Dies ist auch ein nützliches Verhalten, da man sich tatsächlich verschiedene visuelle Effekte vorstellen kann, um ein Element zu verbergen. Das Ausblenden eines Elements ist nur eine Art von visuellem Effekt, der mithilfe der Deckkraft festgelegt wird. Andere visuelle Effekte können das Element mithilfe der Transformationseigenschaft entfernen. Siehe auch http://taccgl.org/blog/css-transition-visibility.html

Es ist oft nützlich, den Opazitätsübergang mit einem Sichtbarkeitsübergang zu kombinieren! Obwohl die Deckkraft das Richtige zu tun scheint, erhalten vollständig transparente Elemente (mit der Deckkraft: 0) weiterhin Mausereignisse. So reagieren beispielsweise Links auf ein Element, das nur mit einem Deckkraftübergang ausgeblendet wurde, immer noch auf Klicks (obwohl nicht sichtbar), und Links hinter dem ausgeblendeten Element funktionieren nicht (obwohl sie durch das ausgeblendete Element sichtbar sind). Siehe http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Dieses seltsame Verhalten kann vermieden werden, indem nur beide Übergänge verwendet werden, der Übergang zur Sichtbarkeit und der Übergang zur Deckkraft. Dabei wird die Sichtbarkeitseigenschaft verwendet, um Mausereignisse für das Element zu deaktivieren, während die Deckkraft für den visuellen Effekt verwendet wird. Es muss jedoch darauf geachtet werden, das Element nicht zu verbergen, während der visuelle Effekt abgespielt wird, der sonst nicht sichtbar wäre. Hier wird die spezielle Semantik des Sichtbarkeitsübergangs nützlich. Beim Ausblenden eines Elements bleibt das Element während der Wiedergabe des visuellen Effekts sichtbar und wird anschließend ausgeblendet. Wenn Sie dagegen ein Element anzeigen, macht der Sichtbarkeitsübergang das Element sofort sichtbar, dh bevor der visuelle Effekt abgespielt wird.