Pour JavaScript ou jQuery, comment faire en sorte que l’événement transitionend ne se déclenche pas?

Dans le lien:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

il est dit que:

Remarque: L’événement transitionend ne se déclenche pas si la transition est annulée, car la valeur de la propriété animante est modifiée avant la fin de la transition.

• la bordure de transition css est contenue sauf pour div fixe
• bouton de transition pour basculer en arrière en utilisant CSS ou JS
• jQuery se lier à la transition css3 en cours
• Transitions CSS appliquées même si elles sont activées après le changement d’état?
• Comment créer une orbite de trois éléments autour d’un logo

J’ai donc essayé et essayé sur http://jsfiddle.net/HA8s2/32/ et http://jsfiddle.net/HA8s2/33/ en utilisant Chrome et Firefox.

exemple: (cliquez sur la case de gauche ou de droite dans jsfiddle)

$(".foo").click(function(evt) { $(".foo").addClass("hide"); setTimeout(function() { $(".foo").eq(0).removeClass("hide"); }, 3000); }); $(".foo").on("transitionend", function(evt) { console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000); }); 

c’est avec une durée de transition CSS de 6 secondes:

 transition-duration: 6s; 

Mais les deux ont gardé l’animation. En fait, la zone de gauche “s’anime à une nouvelle valeur au milieu de l’animation d’origine”; il a donc fallu 9 secondes à la gauche pour terminer, tandis que la zone de droite a pris 6 secondes.

De plus, Firefox n’a que les deux événements dans http://jsfiddle.net/HA8s2/32/ séparés de 2 secondes au lieu de 3 secondes.

La question qui se pose est la suivante: comment faire en sorte que la transition se termine comme décrit dans la documentation de mozilla.org? (et non par une autre méthode de force brute).

(En d’autres termes, je souhaite connaître toutes les situations dans lesquelles le système de transitionend ne se déclenchera pas et le tester).

Mise à jour: j’ai pu annuler l’animation si j’ajoutais un display: none dans la zone de gauche, comme sur http://jsfiddle.net/HA8s2/34/ et je ne pourrai pas l’annuler si c’est visibility: hidden comme dans http://jsfiddle.net/HA8s2/35/ mais cela ne “change” pas vraiment la valeur de la propriété comme le dit la documentation – il s’agit d’append ou de modifier une autre valeur de propriété.

• débordement: masqué provoque une bordure blanche avec une transition css
• Devrais-je utiliser / éviter jQuery animate?
• Barres de défilement Colorbox
• Développer le fond du centre (CSS / Javascript)
• Pourquoi append deux liens vers JQuery dans ce cas

 .myelem { transition: 0.5s all; } 

 .alsothis { transition: none; }