GlobalEventHandlers.onanimationcancel

在此页

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

onanimationcancel 特性为 GlobalEventHandlers 混合 EventHandler 为处理 animationcancel 事件。

An animationcancel event is sent when a CSS animation unexpectedly aborts, that is, any time it stops running without sending an animationend event. This can happen, for example, when the animation-name is changed such that the animation is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using CSS.

句法

var animCancelHandler = target.onanimationcancel;
target.onanimationcancel = Function

值

A 函数 to be called when an animationcancel event occurs indicating that a CSS animation has begun 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.

范例

HTML

<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

: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, with all its properties, including animation , defined. We go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event.

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

The animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.

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

Since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed.

JavaScript

Before we get to the animation code, we define a function which logs information to a box on the user's screen. We'll use this to show information about the events we receive. Note the use of AnimationEvent.animationName and AnimationEvent.elapsedTime to get information about the event which occurred.

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

Then we set up the handleCancelEvent() function, which is called in response to the animationcancel event, as set up in the HTML above. All we do here is log information to the console, but you might find other use cases, such as starting a new animation or effect, or terminating some dependent operation.

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

Then we add a method to handle toggle display between " flex" and " none" and establish it as the handler for a click event on the "Hide/Show" the Box button:

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

Toggling the box to display: none has the effect of aborting its animation. In browsers that support animationcancel , the event is fired and this handler is called.

结果

Assembled together, you get this:

If your browser supports animationcancel , hiding the box using the button will cause a message to be displayed about the event.

规范

规范	状态	注释
CSS 动画 The definition of 'onanimationcancel' 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
`onanimationcancel`	Chrome No	Edge No	Firefox 54	IE ?	Opera ?	Safari 13.1 13.1 部分支持 12 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.	WebView Android No	Chrome Android No	Firefox Android 54	Opera Android ?	Safari iOS 13.4 13.4 部分支持 12 The event handler is exposed but will not actually be called unless both the "Web Animations" and "CSS Animations via Web Animations" preferences are enabled.	Samsung Internet Android No

图例

完整支持
不支持
兼容性未知 ?

另请参阅

animationcancel event this event handler is triggered by.
AnimationEvent

元数据

最后修改： Mar 18, 2019

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

结果

规范

浏览器兼容性

图例

另请参阅

相关话题