HTMLElement: animationcancel イベント

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

CSS アニメーションが予期せず中断すると、animationcancel イベントが発生します。 言い換えれば、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';

次も同様ですが、addEventListener() の代わりに onanimationcancel プロパティを使用します。

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: 3rem;
  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 ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 54Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?

凡例

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

関連情報