GlobalEventHandlers.ontransitioncancel

ontransitioncancelGlobalEventHandlers ミックスインのプロパティで、 transitioncancel イベントを処理するイベントハンドラー (EventHandler) です。

<transitioncancel イベントは CSS トランジションがキャンセルされたときに送信されます。トランジションがキャンセルされるのは下記のような時です。

  • 適用されている対象の transition-property プロパティの値が変更された時。
  • display プロパティが none に変更された時。
  • 完了する前に、トランジションが停止された時。例えば、マウスオーバーでトランジション中の要素をマウスアウトした時。

構文

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

関数 (Function) で、 CSS トランジションがキャンセルされたことを示す transitioncancel イベントが target 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 (HTMLElement)、文書 (Document)、ウィンドウ (Window) です。この関数は単一の引数、発生したイベントを記述する TransitionEvent を単一の引数として受け取ります。イベントの TransitionEvent.elapsedTime プロパティの値は、 transition-duration の値と同じでなければなりません。

: elapsedTime には、トランジション効果が始まる前の時間は含まれていません。つまり、 transition-delay の値は、待ち時間が終了してアニメーションが始まるまでは 0 である elapsedTime の値に影響しません。

この例では、transitionrun イベントと transitionend イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。

追加で、click イベントも使用しています。それで、(display: none;) で四角を非表示にすることで、transitioncancel イベントが発行される様子を見ることができます。

HTML

これは <div> だけを作成して、後は CSS で色やトランジション後のスタイルを指定します。

<div class="box"></div>

CSS

下記の CSS は四角にマウスオーバーする時、色やサイズを変えたり、回転させたりするようなトランジション効果を適用します。

.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px;
  font: bold 1.6em "Helvetica", "Arial", sans-serif;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}

.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

JavaScript

次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ-を設定します。

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
} 
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}

box.onclick = function() {
  box.style.display = 'none';
  timeout = window.setTimeout(appear, 2000);
  function appear() {
    box.style.display = 'block';
  }
}

box.ontransitioncancel = function(event) {
  console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
}

結果

結果のコンテンツは次のようになります。

四角にマウスオーバーやマウスアウトするときどうなるか見てください。

あと、開発ツールにある JavaScript コンソールも見て、トランジションが終わる前に四角をクリックしたりマウスアウトすると、どんなログが出るか注意してください。

仕様書

仕様書 状態 備考
CSS Transitions
ontransitioncancel の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ontransitioncancelChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 53IE ? Opera ? Safari 完全対応 13.1
完全対応 13.1
部分対応 12
補足
補足 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.
WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android ? Safari iOS 完全対応 13.4
完全対応 13.4
部分対応 12
補足
補足 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報