HTMLElement: animationcancel イベント

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

animationcancel イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 animationend イベントを送出せずに実行が停止するときはいつでもです。これは animation-name が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

このイベントのイベントハンドラーは、 onanimationcancel プロパティを設定するか、 addEventListener() を使用することで追加することができます。

バブリング あり
キャンセル 不可
インターフェイス AnimationEvent
イベントハンドラープロパティ onanimationcancel

このコードは現在アニメーションしている要素を取得し、 animationcancel イベントのリスナーを追加します。次に、要素の display プロパティを none に設定し、 animationcancel イベントを引き起こします。

const animated = document.querySelector('.animated');

animated.addEventListener('animationcancel', () => {
  console.log('アニメーションが取り消されました');
});

animated.style.display = 'none';

同様に、 onanimationcancel プロパティを addEventListener() の代わりに使用するとこうなります。

const animated = document.querySelector('.animated');
animated.onanimationcancel = () => {
  console.log('アニメーションが取り消されました');
};

animated.style.display = 'none';

ライブデモ

HTML

<div class="animation-example">
    <div class="container">
        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
    </div>
    <button class="activate" type="button">アニメーションを有効にする</button>
    <div class="event-log"></div>
</div>

CSS

.container {
  height: 3rem;
}

.event-log {
  width: 25rem;
  height: 2rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}

JS

const animation = document.querySelector('p.animation');
const animationEventLog = document.querySelector('.animation-example>.event-log');
const applyAnimation = document.querySelector('.animation-example>button.activate');
let iterationCount = 0;

animation.addEventListener('animationstart', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
});

animation.addEventListener('animationiteration', () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
});

animation.addEventListener('animationend', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
  animation.classList.remove('active');
  applyAnimation.textContent = "アニメーションを有効にする";
});

animation.addEventListener('animationcancel', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
});

applyAnimation.addEventListener('click', () => {
  animation.classList.toggle('active');
  animationEventLog.textContent = '';
  iterationCount = 0;
  let active = animation.classList.contains('active');
  if (active) {
    applyAnimation.textContent = "アニメーションを取り消す";
  } else {
    applyAnimation.textContent = "アニメーションを有効にする";
  }
});

結果

仕様書

仕様書 状態 備考
CSS Animations 草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animationcancel eventChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 54IE 未対応 なしOpera 未対応 なしSafari 完全対応 13.1
完全対応 13.1
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 54Opera Android 未対応 なしSafari iOS 完全対応 13.4
完全対応 13.4
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報