Problème pour déclencher une transition css via js

Fermé
Sauvegarde2 Messages postés 205 Date d'inscription dimanche 14 décembre 2008 Statut Membre Dernière intervention 11 janvier 2015 - 15 nov. 2014 à 05:22
Bonsoir / bonjour.

Je suis en train de travailler sur un effet de cooldown sur un bouton pour un jeu par navigateur.

Pour cet effet j'utilise une transition css sur la largeur d'une div qui apparait par dessus le bouton lorsqu'on clique dessus.

Voici comment ça fonctionne :

var cooldown = document.createElement("div");
cooldown.className = "cooldown";
cooldown.style.transitionDuration = delay + "ms";
btn.appendChild(cooldown);
setTimeout(function(){toggleClass(cooldown, "up", true);}, 20);

Où btn est le bouton (sous forme d'une div stylisée) et la classe "up" donne juste "width: 0%".
La transition fait donc passer la div cooldown de "width: 100%" à "width: 0%" durant le délai fixé.

Le problème est que je suis obligé de mettre un timeout avant d'ajouter l'attribut "up", sinon la transition ne se déclenche pas (problème dans l'ordre d'application des propriétées css ?).

J'ai même testé en mettant un timeout de 10ms : la transition ne se déclenche pas, elle ne se fait qu'à partir de 20ms d'attente.

Je n'ai pas trouvé l'explication de ce problème, pouvez-vous m'éclairer ?