Transizione CSS con visibilità non funzionante

Question

Nel violino in basso, 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 al passaggio del mouse. Succede in entrambi i Chrome & 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; 
} 

Answer 1

Questo non è un bug - si può solo passaggio sulle proprietà ordinali/calcolabile (un modo semplice di pensare a questo è una proprietà con un valore numerico di inizio e fine numero .. anche se ci sono alcune eccezioni).

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

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

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

un elenco di transitionable (animatable) proprietà può essere trovato here

Answer 2

visibilità è animatable. Controllare questo post del blog su di esso: http://www.greywyvern.com/?post=337

si può vedere anche qui: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Diciamo che avere un menu che si desidera fade-in e fade-out sul passaggio del mouse. Se si utilizza solo opacity:0, il menu trasparente sarà ancora lì e si animerà quando si posiziona il mouse sull'area invisibile. Ma se si aggiunge visibility:hidden, è possibile 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>

Answer 3

visibilità è una proprietà animatable secondo la specifica, ma le transizioni sulla visibilità non si lavora a poco a poco, come ci si potrebbe aspettare. Invece le transizioni sulla visibilità ritardano nascondendo un elemento. D'altro canto, rendere visibile un elemento funziona immediatamente. Questo è come è definito dalla specifica (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 usando l'opacità. Altri effetti visivi potrebbero allontanarsi dall'elemento usando per es.la proprietà transform, vedi anche http://taccgl.org/blog/css-transition-visibility.html

È spesso utile combinare la transizione di opacità con una transizione di visibilità! Anche se l'opacità sembra fare la cosa giusta, gli elementi completamente trasparenti (con opacità: 0) continuano a ricevere eventi del mouse. Quindi ad es. i collegamenti su un elemento che era sfumato con una transizione di opacità da solo, rispondono ancora ai clic (anche se non sono visibili) e i 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 utilizzando entrambe le transizioni, la transizione sulla visibilità e la transizione su opacità. In tal modo la proprietà visibility 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 mentre è in riproduzione l'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 viene nascosto in seguito. D'altra parte quando si rivela un elemento, la transizione di visibilità rende immediatamente visibile l'elemento, cioè prima di riprodurre l'effetto visivo.