CSS: opacité de transition lors du passage de la souris?


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

Pourquoi cela n'anime-t-il l'opacité que lorsque je survole, mais pas lorsque je quitte l'objet avec la souris?

Démo ici: http://jsfiddle.net/7uR8z/


J'utilise Safari et cela fonctionne parfaitement même lorsque je laisse l'objet avec la souris ... Quel est le problème?
AleVale94

Non, ça ne marche pas pour moi! La transition fonctionne lorsque je survole la case rouge! Lorsque vous quittez la boîte rouge avec la souris, il "saute" à l'opacité totale - je veux aussi qu'il s'anime à la souris!
mat

Pourquoi ne pas utiliser le filtre ... caniuse.com/#search=filter
DevWL

Réponses:


202

Vous appliquez des transitions uniquement à la :hoverpseudo-classe 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émo: http://jsfiddle.net/7uR8z/6/

Si vous ne souhaitez pas que la transition affecte l' mouse-overévénement, mais uniquement mouse-out, vous pouvez désactiver les transitions pour l' :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émo: http://jsfiddle.net/7uR8z/3/


2

J'ai réussi à trouver une solution en utilisant css / jQuery avec laquelle je suis à l'aise. Le problème d'origine: j'ai dû forcer l'affichage de la visibilité pendant l'animation car j'ai des éléments suspendus à l'extérieur de la zone. Ce faisant, de gros blocs de texte sont désormais suspendus à l'extérieur de la zone de contenu pendant l'animation.

La solution était de démarrer les éléments de texte principaux avec une opacité de 0 et de les utiliser addClasspour injecter et passer à une opacité de 1. Puis, removeClasslorsque vous cliquez à nouveau sur.

Je suis sûr qu'il existe un moyen entièrement jQquery de le faire. Je ne suis pas du genre à le faire. :)

Donc, dans sa forme la plus élémentaire ...

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

Merci à tous pour l'aide.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.