1. 開発者向けのウェブ技術
  2. Web API
  3. Element
  4. transitionrun

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: transitionrun イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。

transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち transition-delay が始まる前に発生します。

このイベントはキャンセルできません。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("transitionrun", (event) => { })
ontransitionrun = (event) => { }

イベント型

TransitionEvent です。 Event を継承しています。

Event TransitionEvent

イベントプロパティ

親である Event から継承したプロパティもあります。

TransitionEvent.propertyName 読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

TransitionEvent.elapsedTime 読取専用

float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は transition-delay プロパティの影響を受けません。

TransitionEvent.pseudoElement 読取専用

文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 ('') です。

例

このコードは transitionrun イベントのリスナーを追加します。

js
el.addEventListener("transitionrun", () => {
 console.log(
 "トランジションは実行中ですが、まだトランジションは始まっていません。",
 );
});

同じことを、ontransitionrun プロパティを addEventListener() の代わりに使用して行います。

js
el.ontransitionrun = () => {
 console.log(
 "トランジションの実行が開始され、トランジションの遅延時間が経過した時点でトランジションを開始します。",
 );
};

ライブ例

次の例では、単純な <div> 要素に遅延を含むトランジションをスタイル設定しています。

html
<div class="transition">ここにポインターを当ててください</div>
<div class="message"></div>
css
.transition {
 width: 100px;
 height: 100px;
 background: red;
 transition-property: transform, background;
 transition-duration: 2s;
 transition-delay: 1s;
}
.transition:hover {
 transform: rotate(90deg);
 background: transparent;
}

これにいくらかの JavaScript を追加して、transitionstart および transitionrun イベントが発生すると実行されるようにします。

js
const el = document.querySelector(".transition");
const message = document.querySelector(".message");
el.addEventListener("transitionrun", () => {
 message.textContent = "transitionrun が発生";
});
el.addEventListener("transitionstart", () => {
 message.textContent = "transitionstart が発生";
});
el.addEventListener("transitionend", () => {
 message.textContent = "transitionend が発生";
});

違いは次の通りです。

  • transitionrun は、トランジションが作成されたとき(つまり、遅延が始まるとき)に発生します。
  • transitionstart は、実際のアニメーションが始まったとき(つまり、遅延が終わったとき)に発生します。

transitionrun は、トランジションが遅延時間内にキャンセルされた場合でも発生します。トランジションの遅延がない場合や、transition-delay が負の場合は、transitionrun と transitionstart の両方が発生します。

仕様書

仕様書
CSS Transitions Module Level 1
# transitionrun

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /