CSS : opacité de la transition lors de la sortie de la souris ?

Question

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

Pourquoi l'opacité n'est-elle animée que lorsque je fais un survol de l'objet, mais pas lorsque je le quitte avec la souris ?

Démonstration ici : https://jsfiddle.net/7uR8z/

Answer 1

Vous appliquez les transitions uniquement à la :hover et non à l'élément lui-même.

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

Démonstration : https://jsfiddle.net/7uR8z/6/

Si vous ne voulez pas que la transition affecte la mouse-over mais seulement mouse-out vous pouvez désactiver les transitions pour le :hover état :

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

Démonstration : https://jsfiddle.net/7uR8z/3/

Answer 2

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

Vérifiez le violon : https://jsfiddle.net/2k3hfwo0/2/

Answer 3

J'ai réussi à trouver une solution utilisant css/jQuery avec laquelle je suis à l'aise. Le problème initial : J'ai dû forcer la visibilité à être affichée pendant l'animation car j'ai des éléments suspendus en dehors de la zone. Ce faisant, de gros blocs de texte sont maintenant suspendus en dehors de la zone de contenu pendant l'animation également.

La solution a été de commencer les éléments de texte principaux avec une opacité de 0 et d'utiliser la fonction addClass pour injecter et passer à une opacité de 1. Puis removeClass lorsqu'on clique à nouveau dessus.

Je suis sûr qu'il y a un moyen de faire ça en jQquery. Mais je ne suis pas le mieux placé pour le faire :)

Donc, dans sa forme la plus basique...

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

Merci à tous pour votre aide.

Answer 4

D'ailleurs, je me débattais avec cela dans FIREFOX jusqu'à ce que je réalise que vous avez une faute de frappe dans le mot opacité :

-moz-transition: opactiy .15s ease-in-out;

doit être

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