GlobalEventHandlers.onanimationiteration

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

草案
此页面不完整。

onanimationiteration 特性为 GlobalEventHandlers 混合 EventHandler 为处理 animationiteration 事件。

animationiteration event is sent when a CSS animation reaches the end of an iteration. An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.

句法

var animIterationHandler = target.onanimationiteration;
target.onanimationiteration = Function

值

A 函数 to be called when an animationiteration event occurs indicating that a CSS animation has reached the end of an iteration while running on the target , where the target object is an HTML element ( HTMLElement ), document ( Document ), or window ( Window ). The function receives as input a single parameter: an AnimationEvent object describing the event which occurred.

范例

Let's create an animation which automatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. Much of this code is the same as in other examples of animation events, so it may look familiar.

HTML

<div class="main">
  <div id="box">
    <div id="text">Box</div>
  </div>
</div>
<div class="button" id="play">
  Begin Demonstration
</div>

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

Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the animation style later to start animating the box.

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

The animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.

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

JavaScript

Some JavaScript code will need to be written to handle the click on the button to start the next iteration. Let's have a look.

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

This sets up two global variables: box , which references the "box" element that we're animating, and iterationCounter , which is initially zero, which indicates how many iterations of the animation have occurred.

The onanimationiteration event handler is then set up. It simply sets the box's animation-play-state to "paused", then updates the text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.

Finally, we set up a handler for a click on the button that runs the animation:

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

This sets the box element's animation-play-state to "running" and increments the iteration counter. That's all there is to it!

结果

Assembled together, you get this:

Each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.

规范

规范	状态	注释
CSS 动画 The definition of 'onanimationiteration' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`onanimationiteration`	Chrome Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationiteration`	Edge ≤79 ≤79 ≤79 Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationiteration`	Firefox 51	IE ?	Opera ?	Safari 9	WebView Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationiteration`	Chrome Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationiteration`	Firefox Android 51	Opera Android ?	Safari iOS 9	Samsung Internet Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationiteration`

图例

完整支持
兼容性未知 ?

另请参阅

animationiteration event, which triggers this event handler
AnimationEvent

元数据

最后修改： 2019 年 3 月 23 日

GlobalEventHandlers
特性
1. onabort
2. onanimationcancel
3. onanimationend
4. onanimationiteration
5. onauxclick
6. onblur
7. oncancel
8. oncanplay
9. oncanplaythrough
10. onchange
11. onclick
12. onclose
13. oncontextmenu
14. oncuechange
15. ondblclick
16. ondurationchange
17. onended
18. onerror
19. onfocus
20. onformdata
21. ongotpointercapture
22. oninput
23. oninvalid
24. onkeydown
25. onkeypress
26. onkeyup
27. onload
28. onloadeddata
29. onloadedmetadata
30. onloadend
31. onloadstart
32. onlostpointercapture
33. onmousedown
34. onmouseenter
35. onmouseleave
36. onmousemove
37. onmouseout
38. onmouseover
39. onmouseup
40. onpause
41. onplay
42. onplaying
43. onpointercancel
44. onpointerdown
45. onpointerenter
46. onpointerleave
47. onpointermove
48. onpointerout
49. onpointerover
50. onpointerup
51. onreset
52. onresize
53. onscroll
54. onselect
55. onselectionchange
56. onselectstart
57. onsubmit
58. ontouchcancel
59. ontouchstart
60. ontransitioncancel
61. ontransitionend
62. onwheel
实现通过：

在此页

句法

值

范例

HTML

CSS

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题