CSS: ¿opacidad de transición al sacar el mouse?

115
.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

¿Por qué esto solo anima la opacidad cuando me desplazo pero no cuando dejo el objeto con el mouse?

Demostración aquí: http://jsfiddle.net/7uR8z/

mate
fuente
Yo uso Safari y funciona perfectamente incluso cuando dejo el objeto con el mouse ... ¿Cuál es el problema?
AleVale94
¡No, no funciona para mí! ¡La transición funciona cuando coloco el cursor sobre el cuadro rojo! Al dejar el cuadro rojo con el mouse, "salta" de nuevo a la opacidad total. ¡Quiero que también se anime al salir!
Matt
Por qué no usar filter ... caniuse.com/#search=filter
DevWL

Respuestas:

202

Está aplicando transiciones solo a la :hoverpseudoclase, y no al elemento en sí.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demostración: http://jsfiddle.net/7uR8z/6/

Si no desea que la transición afecte al mouse-overevento, pero solo mouse-out, puede desactivar las transiciones para el :hoverestado:

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demostración: http://jsfiddle.net/7uR8z/3/

Sampson
fuente
2

Me las arreglé para encontrar una solución usando css / jQuery con la que me siento cómodo. El problema original: tuve que forzar que se mostrara la visibilidad mientras animaba ya que tengo elementos colgando fuera del área. Al hacerlo, los grandes bloques de texto ahora también cuelgan fuera del área de contenido durante la animación.

La solución fue comenzar los elementos de texto principales con una opacidad de 0 y usarlos addClasspara inyectar y hacer la transición a una opacidad de 1. Luego, removeClasscuando se hace clic en ellos nuevamente.

Estoy seguro de que hay una forma totalmente jQquery de hacer esto. Simplemente no soy el tipo para hacerlo. :)

Entonces, en su forma más básica ...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Gracias a todos por la ayuda.

Sektion66
fuente
1
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Compruebe el violín: http://jsfiddle.net/2k3hfwo0/2/

Peter Darmis
fuente