1. ホーム
  2. javascript

[解決済み] CSS3 の遷移イベント

2022-04-13 05:58:14

質問

css3のトランジションが開始されたか終了したかを確認するために、要素から発生するイベントはありますか?

どのように解決するのですか?

W3C CSS Transitions Draft(草案

<ブロッククオート

CSS トランジションが完了すると、対応する DOM イベントが生成される。イベントは、トランジションが発生した各プロパティに対して発生します。これにより、コンテンツ開発者は、遷移の完了と同期したアクションを実行することができます。


Webkit

<ブロッククオート

トランジションが完了するタイミングを判断するには、トランジションの終了時に送信される DOM イベントに JavaScript のイベントリスナー関数を設定します。このイベントは WebKitTransitionEvent のインスタンスであり、そのタイプは webkitTransitionEnd .

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

モジラ

<ブロッククオート

遷移が完了したときに発生するイベントが1つあります。Firefox では、このイベントは transitionend を、Operaでは oTransitionEnd であり、WebKit では webkitTransitionEnd .

オペラ

<ブロッククオート

トランジションイベントは1種類 が利用できます。その oTransitionEnd イベント が完了した時点で発生します。 トランジションになります。

インターネットエクスプローラー

<ブロッククオート

transitionend イベントは、トランジションが完了した時点で発生します。完了する前にトランジションが削除された場合、イベントは発生しません。


スタックオーバーフロー どのように私はブラウザ間でCSS3遷移関数を正規化するのですか?