Transición CSS con visibilidad que no funciona

En el violín de abajo, tengo una transición de visibilidad y opacidad por separado. El último funciona pero el primero no. Además, en caso de visibilidad, el tiempo de transición se interpreta como un retraso al desplazarse. Ocurre tanto en Chrome como en Firefox. ¿Es esto un error?

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;
}

Esto no es un error , solo puede realizar la transición en propiedades ordinales / calculables (una forma fácil de pensar en esto es cualquier propiedad con un valor numérico inicial y final, aunque hay algunas excepciones).

Esto se debe a que las transiciones funcionan calculando fotogramas clave entre dos valores y produciendo una animación extrapolando cantidades intermedias.

visibility en este caso es una configuración binaria (visible / oculta), por lo que una vez que transcurre la duración de la transición, la propiedad simplemente cambia de estado, lo ve como un retraso, pero en realidad puede verse como el fotograma clave final de la animación de transición, con el no habiendo sido calculados los fotogramas clave intermedios (¿qué constituyen los valores entre oculto / visible? ¿Opacidad? ¿Dimensión? Como no es explícito, no se calculan).

opacity es una configuración de valor (0-1), por lo que los fotogramas clave se pueden calcular a lo largo de la duración proporcionada.

Puede encontrar una lista de propiedades transicibles (animables) aquí

La visibilidad es animable. Consulte esta publicación de blog al respecto: http://www.greywyvern.com/?post=337

También puede verlo aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Supongamos que tiene un menú en el que desea que aparezca y desaparezca gradualmente al pasar el mouse. Si opacity:0solo lo usa , su menú transparente seguirá ahí y se animará cuando pase el mouse por el área invisible. Pero si agrega visibility:hidden, puede eliminar este 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 visibilidad es una propiedad animable según la especificación, pero las transiciones en la visibilidad no funcionan gradualmente, como cabría esperar. En cambio, las transiciones en la visibilidad retrasan la ocultación de un elemento. Por otro lado, hacer visible un elemento funciona de inmediato. Esto es como está definido por la especificación (en el caso de la función de temporización predeterminada) y como está implementado en los navegadores.

Este también es un comportamiento útil, ya que de hecho uno puede imaginar varios efectos visuales para ocultar un elemento. La atenuación de un elemento es solo un tipo de efecto visual que se especifica mediante la opacidad. Otros efectos visuales pueden alejar el elemento usando, por ejemplo, la propiedad transform, ver también http://taccgl.org/blog/css-transition-visibility.html

¡A menudo es útil combinar la transición de opacidad con una transición de visibilidad! Aunque la opacidad parece hacer lo correcto, los elementos completamente transparentes (con opacidad: 0) aún reciben eventos del mouse. Por ejemplo, los enlaces de un elemento que se desvaneció con una transición de opacidad sola, aún responden a los clics (aunque no son visibles) y los enlaces detrás del elemento atenuado no funcionan (aunque son visibles a través del elemento atenuado). Consulte http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Este comportamiento extraño se puede evitar simplemente usando ambas transiciones, la transición en visibilidad y la transición en opacidad. Por lo tanto, la propiedad de visibilidad se usa para deshabilitar los eventos del mouse para el elemento mientras que la opacidad se usa para el efecto visual. Sin embargo, se debe tener cuidado de no ocultar el elemento mientras se reproduce el efecto visual, que de otro modo no sería visible. Aquí la semántica especial de la transición de visibilidad se vuelve útil. Al ocultar un elemento, el elemento permanece visible mientras se reproduce el efecto visual y luego se oculta. Por otro lado, al revelar un elemento, la transición de visibilidad hace que el elemento sea visible inmediatamente, es decir, antes de reproducir el efecto visual.