window屬性：onanimationiteration

onanimationiteration屬性

animationiteration 事件的事件處理程序。此事件將會在CSS動畫到達(dá)迭代結(jié)束時發(fā)送。當(dāng)通過執(zhí)行最后一個動畫步驟完成對動畫指令序列的單次傳遞完成時，迭代結(jié)束。

onanimationiteration屬性語法

var animIterationHandler = target.onanimationiteration;

target.onanimationiteration = Function

onanimationiteration屬性值

當(dāng)animationiteration事件發(fā)生時要調(diào)用的Function，它指示CSS動畫在目標(biāo)（target）上運行時已到達(dá)迭代的末尾，其中，所述目標(biāo)對象是一個HTML元素（HTMLElement），文件（Document），或窗口（Window）。該函數(shù)接收作為輸入的單個參數(shù)：AnimationEvent描述發(fā)生的事件的對象。

onanimationiteration屬性示例

讓我們創(chuàng)建一個動畫，在每次迭代結(jié)束時自動暫停，允許用戶選擇是否開始下一次迭代。這些代碼大部分與動畫事件的其他示例相同。

HTML內(nèi)容

以下是需要的HTML內(nèi)容：

<div class="main">
  <div id="box">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="play">
  Begin Demonstration
</div>

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;
  animation: 2s ease-in-out 0s infinite alternate both paused slideBox;
} 

接下來定義動畫的關(guān)鍵幀；他們描述了一個動畫，使框從容器的左上角遷移到右下角。

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

完整的CSS代碼如下：

:root {
  --boxwidth:50px;
}

.main {
  width: 300px;
  height:300px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font: 14px "Open Sans", "Arial", sans-serif;
} 

#text {
  width: 46px;
  padding: 10px;
  position: relative;
  text-align: center;
  align-self: center;
  color: white;
  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
} 

 #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: 2s ease-in-out 0s infinite alternate both paused slideBox;
} 
 
@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

JavaScript內(nèi)容

需要編寫一些JavaScript代碼來處理點擊按鈕以開始下一次迭代。我們來看一下。

var box = document.getElementById("box");
var iterationCounter = 0;

box.onanimationiteration = function(event) {
  box.style.animationPlayState = "paused";
  document.getElementById("play").innerHTML = "Start Iteration #" + (iterationCounter+1);
};

它設(shè)置了兩個全局變量：

• box：它引用了我們正在進行動畫處理的"box"元素；
  
• iterationCounter，初始值為零，用于表示動畫發(fā)生了多少次迭代。
  

然后建立onanotationiteration事件處理程序。它只是簡單地將盒子的animation-play-state（動畫播放狀態(tài)）設(shè)置為“暫?！?，然后更新按鈕中顯示的文本，以指示單擊該按鈕將開始播放動畫的下一次迭代。

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

document.getElementById("play").addEventListener("click", function(event) {
  box.style.animationPlayState = "running";
  iterationCounter++;
}, false);

這將box元素的animation-play-state設(shè)置為“運行（running）”并遞增迭代計數(shù)器。

測試運行

你可以在https://codepen.io/pen/中輸入上述代碼以運行該示例。