transicion - La transición CSS con visibilidad no funciona

transition css hover

Question

En el violín a continuación, tengo una transición sobre la visibilidad y la 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 en el desplazamiento. Sucede 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;
}

Answer 1

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

También puede verlo aquí: here

Supongamos que tiene un menú que desea aumentar y disminuir gradualmente al pasar el mouse sobre él. Si usa opacity:0 solo opacity:0 , su menú transparente seguirá estando allí y se animará cuando pase el cursor sobre 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>

Answer 2

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 el retraso de visibilidad ocultan un elemento. Por otro lado, hacer visible un elemento funciona de inmediato. Esto es tal como lo define la especificación (en el caso de la función de temporización predeterminada) y como se implementa en los navegadores.

Este también es un comportamiento útil, ya que de hecho uno puede imaginar varios efectos visuales para ocultar un elemento. El desvanecimiento de un elemento es solo un tipo de efecto visual que se especifica usando opacidad. Otros efectos visuales pueden alejar el elemento utilizando, por ejemplo, la propiedad de transformación, también consulte 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 totalmente transparentes (con opacidad: 0) aún reciben eventos del mouse. Entonces, por ejemplo, los enlaces en un elemento que se desvaneció solo con una transición de opacidad, todavía responden a los clics (aunque no son visibles) y los enlaces detrás del elemento desvanecido no funcionan (aunque son visibles a través del elemento desvanecido). Ver 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 la visibilidad y la transición en la opacidad. De este modo, 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 se oculta después. 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.

Answer 3

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 de inicio y finalización numérica ... 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 transición, la propiedad simplemente cambia de estado, lo ves como un retraso, pero en realidad se puede ver como el fotograma clave final de la animación de transición, con los fotogramas clave intermedios no se han calculado (¿qué constituye 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 transitables (animables) here