GlobalEventHandlers.ontransitioncancel

GlobalEventHandlers ミックスインの ontransitioncancel プロパティは、transitioncancel イベントを実行する イベントハンドラ になります。

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

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

構文

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = Function

target でトランジション中でキャンセルされてから、それを指し示す transitioncancel が起きたとき、Function が呼び出されます。それで target は HTML 要素 (HTMLElement)、document (Document)、window (Window) とします。関数は 1 つの引数があります:それは TransitionEvent オブジェクトになります。そのイベントの TransitionEvent.elapsedTime プロパティの値は transition-duration の値と一緒になるはずです。

注意: elapsedTime にはトランジションが始まる前の時間が含まれていません; つまり transition-delay (待ち時間) によって elapsedTime の値が変わらず、遅延時間が終わりアニメーションが会誌するまで 0 のままです。

この例で、transitionruntransitionend イベントを使用します。それで、トランジションが始まったり終わった時に検出できて、トランジション中に文言を更新させます。あと、アニメーションや他の効果も起こして、反応を連鎖させることもできます。

追加で、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 ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報