Transición CSS con visibilidad que no funciona

102

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;
}
user4150760
fuente
4
este último funciona porque opacitypuede tomar varios valores entre 0y 1, mientras que visibilitypuede ser solo visibleo hidden(sin valores intermedios)
Fabrizio Calderan

Respuestas:

148

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í

SW4
fuente
7
dev.w3.org/csswg/css-transitions/#animtype-visibility especifica que los valores intermedios se asignan a "visible".
Beni Cherniavsky-Paskin
@ BeniCherniavsky-Paskin - esto depende de la función de cronometraje:other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint
SW4
1
La respuesta de SW4 es engañosa y no explica el malentendido en cuanto al propósito de la visibilidad.
JesseMonroy650
@ JesseMonroy650: aunque dudaría en refutarlo, es más fácil hacerlo sin que se proporcione ninguna evidencia adicional para esa afirmación, sería fascinante si pudiera dar más detalles. El OP no estaba preguntando el propósito de la visibilidad (que es diferente a la visualización, la opacidad) sino por qué no se puede animar como una propiedad, es decir, por la razón dada: es efectivamente una configuración de encendido / apagado. La respuesta no busca abordar 'qué es la visibilidad' sino 'por qué no se puede animar'
SW4
Podríamos objetar sobre el significado del PO, pero responderé. Molesto por el tema constante (incompleto) y la incapacidad de hacer que esto funcione, decido investigarlo. Primero, vale la pena señalar que la documentación es deficiente ; las explicaciones son deficientes, la especificación está mal escrita (el editor también tiene una nota). Si bien está documentado como animatable, de hecho tiene pocas de las propiedades; una de esas propiedades es el tiempo . Escribiré un blog pronto.
JesseMonroy650
66

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>

Sevban Öztürk
fuente
2
Esto no es verdad. El artículo muestra claramente: 1: el usuario pasa el mouse sobre el elemento 2: la visibilidad cambia a visible 3: comienza la animación de transición de opacidad
Ben Racicot
5
Y, sin embargo, el artículo logra el equivalente funcional de la visibilidad animada, al pasar hábilmente a la opacidad. Explica bien por qué todavía necesita jugar con la visibilidad para poder hacer clic en las cosas "debajo" de un objeto oculto, como con un menú desplegable. Pero esta respuesta sería mejor si diera un ejemplo y un resumen a nivel local . (Los enlaces se rompen; acabo de arreglar uno)
Bob Stein
esta respuesta es un poco engañosa, pero de todos modos funcionó, ¡gracias!
JaTo
2
@ BobStein-VisiBone Edité mi respuesta y di un ejemplo. Gracias por su ayuda :)
Sevban Öztürk
20

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.

Helmut Emmelmann
fuente