En utilisant jQuery pour faire un fadeIn() sur un élément qui contenait lui-même un élément ayant une animation css3, je me suis aperçu que le fade de jQuery ne fonctionnait plus correctement : au lieu d’avoir une jolie animation d’apparition, l’élément animé passait d’invisible à visible d’un coup à la fin de la durée d’animation.
Le problème
La fonction fadeIn() de jQuery et les animations css3 ne font pas bon ménage si l’élément sur lequel est appelé fadeIn() contient un autre élément animé via une animation css3.
Un overlay avec un spinner (pour indiquer à l’utilisateur le chargement de quelquechose) pourrait être une bon exemple :
Du html :
<div id="overlay"> <div id="spinner"></div> </div>
Des css :
#overlay{
...
}
#spinner{
animation: rotation 3s infinite linear;
}
@keyframes rotation{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
Du javascript :
$('#overlay').fadeIn();
Et la c’est le drame… pas de joli fadeIn, juste une apparition sèche :(
La solution
La solution consiste simplement à appliquer l’animation css3 après le fadeIn() dans le callback de la fonction. Pour se faire, l’animation est déclenchée par l’ajout d’une classe à l’élément animé… on modifie les css en conséquence :
#spinner{
/* suppression de l'animation qu'on déporte dans une classe */
}
#spinner.animated{
animation: rotation 3s infinite linear;
}
et on modifie le javascript :
$('#overlay').fadeIn(function(){
$('#spinner').addClass('animated');
});
Et hop tout rentre dans l’ordre :)
Happy coding !
