Animación CSS3: visualización + opacidad

Tengo un problema con una animación CSS3.

.child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } 

Este código solo funciona si elimino el cambio de display .

Quiero cambiar la pantalla justo después del control deslizante pero la opacidad se debe cambiar con la transición.

Basado en la respuesta de Michaels, este es el código CSS real para usar

 .parent:hover .child { display: block; -webkit-animation: fadeInFromNone 0.5s ease-out; -moz-animation: fadeInFromNone 0.5s ease-out; -o-animation: fadeInFromNone 0.5s ease-out; animation: fadeInFromNone 0.5s ease-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } 

Puedes hacer con animaciones CSS:

 0% display:none ; opacity: 0; 1% display: block ; opacity: 0; 100% display: block ; opacity: 1; 

Si es posible, use visibility lugar de display

Por ejemplo:

 .child { visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .parent:hover .child { visibility: visible; opacity: 1; transition: opacity 0.3s, visibility 0.3s; } 

Esta solución funciona:

  1. definir un “fotogtwig clave”:

     @-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } 
  2. Utilice este “fotogtwig clave” en “hover”:

     div a span { display: none; } div a:hover span { display: block; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1s; animation-name: fadeIn; animation-duration: 1s; } 

Cambié un poco, pero el resultado es hermoso.

 .child { width: 0px; height: 0px; opacity: 0; } .parent:hover child { width: 150px; height: 300px; opacity: .9; } 

Gracias a todos.

Hay otro buen método para hacerlo usando eventos de puntero:

 .child { opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; pointer-events: all; } 

Lamentablemente, esto no es compatible con IE10 y versiones posteriores.

Yo tuve el mismo problema. Traté de usar animaciones en lugar de transiciones, como lo sugirieron @MichaelMullany y @Chris, pero solo funcionaba para los navegadores webkit incluso si copiaba y pegaba con los prefijos “-moz” y “-o”.

Pude evitar el problema al usar la visibility lugar de la display . Esto funciona para mí porque mi elemento secundario es position: absolute , por lo que el flujo de documentos no se ve afectado. Puede funcionar para otros también.

Así es como se vería el código original con mi solución:

 .child { position: absolute; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { position: relative; opacity: 0.9; visibility: visible; } 

Usé esto para lograrlo. Se desvanecen en vuelo estacionario pero no ocupan espacio cuando están ocultos, ¡perfecto!

 .child { height: 0px; opacity: 0; visibility: hidden; transition: all .5s ease-in-out; } .parent:hover child { height: auto; opacity: 1; visibility: visible; } 

En elementos absolutos o fijos, también puede usar z-index:

 .item { position: absolute; z-index: -100; } .item:hover { z-index: 100; } 

Otros elementos deberían tener un índice z entre -100 y 100 ahora.

Lo sé, esta no es realmente una solución para tu pregunta, porque pides

pantalla + opacidad

Mi enfoque resuelve una pregunta más general, pero tal vez este fue el problema de fondo que debería resolverse mediante el uso de la display en combinación con la opacity .

Mi deseo era sacar el Elemento del camino cuando no es visible. Esta solución hace exactamente eso: mueve el elemento fuera de la distancia, y esto puede usarse para la transición:

 .child { left: -2000px; opacity: 0; visibility: hidden; transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s; } .parent:hover .child { left: 0; opacity: 1; visibility: visible; transition: left 0s, visibility 0s, opacity 0.8s; } 

Este código no contiene ningún prefijo del navegador o hacks de compatibilidad con versiones anteriores. Simplemente ilustra el concepto de cómo el elemento se aleja, ya que ya no se necesita.

La parte interesante son las dos definiciones de transición diferentes. Cuando el puntero del mouse está sobre el elemento .parent elemento .child debe colocarse inmediatamente y luego se cambiará la opacidad:

 transition: left 0s, visibility 0s, opacity 0.8s; 

Cuando no hay vuelo estacionario, o el puntero del mouse se movió fuera del elemento, uno tiene que esperar hasta que el cambio de opacidad haya terminado antes de que el elemento pueda moverse de la pantalla:

 transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s; 

Alejar el objeto será una alternativa viable en un caso en el que se configure la display:none no rompería el diseño.

Espero haber dado en el clavo con esta pregunta aunque no la haya respondido.

Si está activando el cambio con JS, digamos al hacer clic, hay una buena solución.

Verá que el problema ocurre porque la animación se ignora en la pantalla: ningún elemento, pero el navegador aplica todos los cambios a la vez y el elemento nunca se muestra: bloquear mientras no esté animado al mismo tiempo.

El truco es pedirle al navegador que represente el cuadro después de cambiar la visibilidad pero antes de activar la animación.

Aquí hay un ejemplo de JQuery:

  $('.child').css({"display":"block"}); //now ask the browser what is the value of the display property $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render //now a change to opacity will trigger the animation $('.child').css("opacity":100); 

Una cosa que hice fue establecer el margen del estado inicial para que fuera algo así como “margin-left: -9999px”, por lo que no aparece en la pantalla, y luego restablecer “margin-left: 0” en el estado hover. Mantenlo “pantalla: bloque” en ese caso. Hice el truco para mí 🙂

Editar: ¿guardar el estado y no volver al estado anterior de desplazamiento? Ok aquí necesitamos JS:

   

Para tener animación en ambos sentidos en HoverIn / Out, hice esta solución. Espero que ayude a alguien

 @keyframes fadeOutFromBlock { 0% { position: relative; opacity: 1; transform: translateX(0); } 90% { position: relative; opacity: 0; transform: translateX(0); } 100% { position: absolute; opacity: 0; transform: translateX(-999px); } } @keyframes fadeInFromNone { 0% { position: absolute; opacity: 0; transform: translateX(-999px); } 1% { position: relative; opacity: 0; transform: translateX(0); } 100% { position: relative; opacity: 1; transform: translateX(0); } } .drafts-content { position: relative; opacity: 1; transform: translateX(0); animation: fadeInFromNone 1s ease-in; will-change: opacity, transform; &.hide-drafts { position: absolute; opacity: 0; transform: translateX(-999px); animation: fadeOutFromBlock 0.5s ease-out; will-change: opacity, transform; } } 

display: no es transitable. Probablemente necesites usar jQuery para hacer lo que quieras hacer.