[解決済み] 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
イベントは、トランジションが完了した時点で発生します。完了する前にトランジションが削除された場合、イベントは発生しません。
関連
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JSアレイループと効率解析の比較
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された