window屬性：onanimationend

onanimationend屬性

animationend事件的事件處理程序。當(dāng)CSS動畫到達其活動周期的末尾時，按照(animation-duration*animation-iteration-count) + animation-delay進行計算，將發(fā)送此animation-delay事件。

onanimationend屬性語法

var animEndHandler = target.onanimationend;

target.onanimationend = Function

onanimationend屬性值

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

onanimationend屬性示例

CSS內(nèi)容

我們來看看我們正在動畫的盒子的樣式。首先是盒子本身，我們設(shè)定它的大小、位置、顏色和布局。請注意，動畫沒有任何內(nèi)容。那是因為我們不希望盒子立即開始動畫。稍后我們將添加animation樣式以啟動框的動畫效果。

#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;
} 

接下來描述動畫序列。首先是"slideAnimation"類建立的 animation 會使該框在一段時間內(nèi)移動五次，它使用"slideBox"關(guān)鍵幀集；接下來定義關(guān)鍵幀，他們描述了一個動畫，使框從容器的左上角遷移到右下角。

.slideAnimation {
  animation: 5s ease-in-out 0s 1 slideBox;
}

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

由于CSS描述了動畫，但沒有將其連接到框，所以我們需要一些JavaScript代碼來實現(xiàn)這一點。

JavaScript內(nèi)容

在我們開始使用動畫代碼之前，我們定義一個函數(shù)將信息記錄到用戶屏幕上的一個框中。我們將使用它來顯示關(guān)于我們收到的事件的信息。請注意使用AnimationEvent.animationName和AnimationEvent.elapsedTime獲取有關(guān)發(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";
};

然后，我們建立了事件處理程序animationstart和animationend事件：

let box = document.getElementById("box");

box.onanimationstart = function(event) {
  log("Animation started", event);
}

box.onanimationend = function(event) {
  log("Animation stopped", event);
};

最后，我們設(shè)置一個處理器來點擊運行動畫的按鈕：

document.getElementById("play").addEventListener("click", function(event) {
  document.getElementById("box").className = "slideAnimation";
  event.target.style.display = "none";
}, false);

這將我們想要設(shè)置動畫的框的類設(shè)置為包含animation描述的類，然后隱藏播放（play）按鈕，因為此示例只會運行一次動畫。