web-dev-qa-db-ja.com

CSS3の移行を停止する方法

進行中の移行を停止したい。

インターネット中にいくつかの参考文献[1] [2]が散在しているのを見つけましたが、それをつなぎ合わせることができないようです。

これが最初の提案のフィドルです（コンテキスト用のjQueryとCSSトランジットを使用）： http://jsfiddle.net/thomseddon/gLjuH/

ありがとう

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

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

javascriptjquerycsscss-transitionscss-animations
19
Thom Seddon

だから私はそれを理解しました： http://jsfiddle.net/thomseddon/gLjuH/3/

秘訣は、アニメーション化する各cssプロパティを次のように現在の値（おそらく遷移の途中）に設定することです。$(this).css('prop', $(this).css('prop'));（おそらく$（this）.dataを使用して要素内のオブジェクトのすべてのプロパティを格納する必要があります。 （小道具）;そしてそれらをループします）。

プロパティを明示的に設定したら、0sアニメーションを実行して前のアニメーションをオーバーライドし、要素を効果的に停止できます。

10
Thom Seddon

はるかに簡単な解決策があります。遷移を停止するだけの場合（一時停止しない場合）。 cssを現在の計算スタイルに設定するだけです。たとえば、topが遷移プロパティであるカスタムスクロールソリューションの場合です。

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

以上です。

3
Maciej Krawczyk