window屬性：onanimationcancel

onanimationcancel屬性

animationcancel 事件的事件處理程序。當CSS動畫意外中止時（換句話說，在任何時候它停止運行而不發(fā)送animationend事件）時將發(fā)送此事件，例如當animation-name被改變，動畫被刪除，或者動畫節(jié)點被隱藏時（可能是直接的或者是因為它的任何包含節(jié)點都被隱藏），請使用CSS。

onanimationcancel屬性語法

var animCancelHandler = target.onanimationcancel;

target.onanimationcancel = Function

onanimationcancel屬性值

在animationcancel事件發(fā)生時調(diào)用的Function，它指示在target上CSS動畫已經(jīng)開始，其中，所述目標對象是一個HTML元素（HTMLElement），文件（Document），或窗口（Window）。該函數(shù)接收作為輸入的單個參數(shù)：描述發(fā)生事件的AnimationEvent對象。

onanimationcancel屬性示例

HTML內(nèi)容

<div class="main">
  <div id="box" onanimationcancel="handleCancelEvent(event);">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="toggleBox">
  Hide the Box
</div>

<pre id="log"></pre>

CSS內(nèi)容

我們來看看我們正在動畫的盒子的樣式。首先是盒子本身，其所有屬性，包括定義的animation。我們繼續(xù)在此處描述動畫，因為動畫是在頁面加載后立即開始的，而不是基于事件。

#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
  animation: 5s ease-in-out 0s infinite alternate both slideBox;
} 

接下來介紹動畫的關鍵幀，從內(nèi)容框的左上角到右下角繪制一個課程。

@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

由于動畫被描述為發(fā)生無數(shù)次，每次交替方向，盒子將在兩個角落之間來回滑動直到停止或頁面關閉。

JavaScript內(nèi)容

在我們開始使用動畫代碼之前，我們定義一個函數(shù)，并將信息記錄到用戶屏幕上的一個框中。我們將使用它來顯示關于我們收到的事件的信息。請注意使用AnimationEvent.animationName和AnimationEvent.elapsedTime獲取有關發(fā)生的事件的信息。

function log(msg, event) {
  let logBox = document.getElementById("log");
 
  logBox.innerHTML += msg;
 
  if (event) {
    logBox.innerHTML += " <code>"+ event.animationName +
        "</code> at time " + event.elapsedTime.toFixed(2) +
        " seconds.";
  }
 
  logBox.innerHTML += "\n";
};

然后我們建立了handleCancelEvent()函數(shù)，這個函數(shù)在響應animationcancel事件時調(diào)用，它是在上文中的HTML部分設置的。我們在這里所做的是將日志信息發(fā)送到控制臺，但是您可能會發(fā)現(xiàn)其他用例，例如開始新的動畫或效果，或終止某些相關操作。

function handleCancelEvent(event) {
  log("Animation canceled", event);
}; 

然后，我們添加一個方法來處理"flex"和"none"之間的切換display，并將它建立為“隱藏/顯示（Hide/Show）”Box按鈕上的click事件的處理程序：

document.getElementById('toggleBox').addEventListener('click', function() {
  if (box.style.display == "none") {
    box.style.display = "flex";
    document.getElementById("toggleBox").innerHTML = "Hide the box";
  } else {
    box.style.display = "none";
    document.getElementById("toggleBox").innerHTML = "Show the box";
  }
});

切換方框為display: none將會取消其動畫效果。在支持animationcancel的瀏覽器中，該事件被觸發(fā)并且該處理程序被調(diào)用。

注意：目前，主要的瀏覽器不支持animationcancel。

如果您的瀏覽器支持animationcancel，使用按鈕隱藏該框會導致顯示有關該事件的消息。

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機器可讀的JSON格式。

• 電腦端

• 移動端