Comment arrêter la transition CSS3

Je souhaite arrêter une transition qui est en cours.

J'ai trouvé quelques références [1] [2] éparpillées sur Internet, mais je n'arrive pas à la reconstituer.

Voici un violon de la première suggestion (Avec jQuery et CSS Transit pour le contexte): http://jsfiddle.net/thomseddon/gLjuH/

Merci

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

J'ai donc compris: http://jsfiddle.net/thomseddon/gLjuH/3/

L'astuce consiste à définir chaque propriété css que vous animez à sa valeur actuelle (éventuellement à mi-transition) comme: $(this).css('prop', $(this).css('prop')); (Probablement voudrait stocker toutes les propriétés d'un objet dans l'élément avec $ (this) .data (accessoires), et les traverser).

Une fois que vous avez défini explicitement les propriétés, vous pouvez exécuter une animation de 0s pour remplacer l'animation précédente et arrêter efficacement l'élément.

Il y a une solution beaucoup plus simple. Si vous voulez simplement arrêter la transition (et ne pas l'arrêter). Il suffit de définir le css en mode calculé en cours. Par exemple, dans une solution de défilement personnalisée, où la propriété supérieure est de transition.

 element.style.top=getComputedStyle(element).top; 

et c'est tout.