CSS: opacidad de transición en el mouse-out?

Question

CSS: opacidad de transición en el mouse-out?

.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 cierro el ratón, pero no cuando dejo el objeto con el ratón?

Demo aquí: http://jsfiddle.net/7uR8z /

89

css css3 css-transitions

Author: törzsmókus, 2012-05-12

Source

4 answers

Por cierto, estaba luchando con esto en FIREFOX hasta que me di cuenta de que tiene un error tipográfico en la palabra opacidad:

// WRONG (there is a typo in the word)
-moz-transition: opactiy .15s ease-in-out;

Necesita ser

// CORRECT
-moz-transition: opacity .15s ease-in-out;

4

Author: Sliq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-10-05 20:09:50

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

La solución fue iniciar los elementos de texto principales con una opacidad de 0 y usar addClass para inyectar y pasar a una opacidad de 1. Luego removeClass cuando se hace clic de nuevo.

Estoy seguro hay una forma jQquery de hacer esto. No soy el tipo para hacerlo. :)

Así que en su forma más básica...

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

Gracias a todos por la ayuda.

2

Author: Sektion66,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-11 17:52:48

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

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

1

Author: Peter Darmis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-10 15:18:39

score 169 · Accepted Answer

Estás aplicando transiciones solo a la pseudo-clase :hover, 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;
}

Demo: http://jsfiddle.net/7uR8z/6 /

Si no desea que la transición afecte el evento mouse-over, pero solo mouse-out, puede desactivar las transiciones para el estado :hover:

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

Demo: http://jsfiddle.net/7uR8z/3 /