3

Javascript を使用してオブジェクトにトランジションを配置します。

$(this).css('transition', 'all 1000ms');

そして、遷移終了イベントをリッスンします。

$(this).on('webkitTransitionEnd', function() { alert('Transition did finish.'); });

イベントがトリガーされ、すべてが期待どおりに機能します。ただし、要素が で始まり、イベントleft:100pxにアニメーション化しようとするとleft:100px、イベントがトリガーされないため、問題が発生します。どうすればこれを修正できますか? 新しい値に対して値を実際にチェックすることはできません。

$(this).css('transform', 'scale(0.1)'); //only when object is being displayed will return matrix value

scale(0.5) does not equal matrix(0.5, 0, 0, 0.5, 0, 0 )
4

1 に答える 1

4

プロパティが等しい場合、webkit-transition は発生しないため、webkitTransitionEnd起動されません!

ここで説明するヘルパーを作成しました: http://jsfiddle.net/JtLAX/

したがって、ここでコールバック関数の別のアプローチを見つける必要があります。

遷移をトリガーするイベントが開始するたびに、setTimeout(function() {}, 1000) を追加することをお勧めします。

または、このライブラリを試すこともできます。トランジションの管理とコールバックの設定に非常に効率的です。

http://ricostacruz.com/jquery.transit/

それを使えば簡単に

$(this).transit({ left: '+=200' }, function() { alert('transition ends' } );

あなたの主な質問について：

CSS トランジションが行われるかどうかを確認する方法はありますか?

私見ですが、唯一の解決策はスタイル要素の属性を手動で確認し、トランジションと比較することだと思いますが、これは非常に困難です。

于 2012-04-22T09:28:56.677 に答える