Transizione CSS con visibilità non funzionante

Nel violino qui sotto, ho una transizione su visibilità e opacità separatamente. Quest'ultimo funziona ma il primo no. Inoltre, in caso di visibilità, il tempo di transizione viene interpretato come ritardo all'hover out. Succede sia in Chrome che in Firefox. è un insetto?

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

Caso 1:

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

Caso 2:

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

Questo non è un bug : è possibile eseguire la transizione solo su proprietà ordinali / calcolabili (un modo semplice per pensare a questo è qualsiasi proprietà con un valore numerico iniziale e finale .. sebbene ci siano alcune eccezioni).

Questo perché le transizioni funzionano calcolando i fotogrammi chiave tra due valori e producendo un'animazione estrapolando importi intermedi.

visibility in questo caso è un'impostazione binaria (visibile / nascosta), quindi una volta scaduta la durata della transizione, la proprietà cambia semplicemente stato, lo vedi come un ritardo, ma in realtà può essere visto come il fotogramma chiave finale dell'animazione di transizione, con il fotogrammi chiave intermedi non calcolati (cosa costituiscono i valori tra nascosto / visibile? Opacità? Dimensione? Poiché non è esplicito, non vengono calcolati).

opacity è un'impostazione di valore (0-1), quindi i fotogrammi chiave possono essere calcolati per la durata fornita.

Un elenco di proprietà modificabili (animabili) può essere trovato qui

La visibilità è animabile. Controlla questo post del blog a riguardo: http://www.greywyvern.com/?post=337

Puoi vederlo anche qui: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Supponiamo che tu abbia un menu che desideri sfumare in apertura e in chiusura al passaggio del mouse. Se usi opacity:0solo, il tuo menu trasparente sarà ancora lì e si animerà quando passi il mouse sull'area invisibile. Ma se aggiungi visibility:hidden, puoi eliminare questo problema:

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>

La visibilità è una proprietà animabile secondo le specifiche, ma le transizioni sulla visibilità non funzionano gradualmente, come ci si potrebbe aspettare. Invece le transizioni sulla visibilità ritardano l'occultamento di un elemento. D'altra parte, rendere visibile un elemento funziona immediatamente. Questo è così come è definito dalle specifiche (nel caso della funzione di temporizzazione predefinita) e come è implementato nei browser.

Anche questo è un comportamento utile, poiché in effetti si possono immaginare vari effetti visivi per nascondere un elemento. La dissolvenza di un elemento è solo un tipo di effetto visivo specificato utilizzando l'opacità. Altri effetti visivi potrebbero spostare l'elemento utilizzando ad esempio la proprietà di trasformazione, vedere anche http://taccgl.org/blog/css-transition-visibility.html

Spesso è utile combinare la transizione di opacità con una transizione di visibilità! Sebbene l'opacità sembri fare la cosa giusta, gli elementi completamente trasparenti (con opacità: 0) ricevono comunque gli eventi del mouse. Quindi, ad esempio, i collegamenti su un elemento che è stato sbiadito con una sola transizione di opacità, rispondono comunque ai clic (sebbene non visibili) ei collegamenti dietro l'elemento sbiadito non funzionano (sebbene siano visibili attraverso l'elemento sbiadito). Vedi http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Questo strano comportamento può essere evitato semplicemente usando entrambe le transizioni, la transizione sulla visibilità e la transizione sull'opacità. In tal modo la proprietà visibilità viene utilizzata per disabilitare gli eventi del mouse per l'elemento mentre l'opacità viene utilizzata per l'effetto visivo. Tuttavia bisogna fare attenzione a non nascondere l'elemento durante la riproduzione dell'effetto visivo, che altrimenti non sarebbe visibile. Qui la semantica speciale della transizione di visibilità diventa utile. Quando si nasconde un elemento, l'elemento rimane visibile durante la riproduzione dell'effetto visivo e successivamente viene nascosto. D'altra parte, quando si rivela un elemento, la transizione di visibilità rende l'elemento visibile immediatamente, cioè prima di riprodurre l'effetto visivo.