From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../htmlelement/animationcancel_event/index.html | 174 +++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 files/zh-cn/web/api/htmlelement/animationcancel_event/index.html (limited to 'files/zh-cn/web/api/htmlelement/animationcancel_event') diff --git a/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html b/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html new file mode 100644 index 0000000000..b20bd99752 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html @@ -0,0 +1,174 @@ +--- +title: 'HTMLElement: animationcancel event' +slug: Web/API/HTMLElement/animationcancel_event +translation_of: Web/API/HTMLElement/animationcancel_event +--- +
{{APIRef}}
+ +
{{SeeCompatTable}}
+ +

一个 animationcancel 事件会在一个 CSS Animation 意外终止时触发. 换句话说, 就是任意时刻 CSS Animation 在没有发送 {{event("animationend")}} 事件时停止运行. 这种情况会在  {{cssxref("animation-name")}} 发生改变导致动画被移除时, 或者使用CSS隐藏了动画中的node节点. 因此要么node节点直接被隐藏，要么因为node节点的父节点被隐藏.

+ +

该事件的处理函数可以通过 {{domxref("GlobalEventHandlers.onanimationcancel", "onanimationcancel")}} 属性进行设置, 或者使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("AnimationEvent")}}
Event handler propertyonanimationcancel
+ +

Examples

+ +

这段代码获取一个当前在动画中的元素，并为它添加了一个animationcancel 事件监听. 然后设置该元素的 display 属性为 none, 触发 animationcancel 事件.

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationcancel', () => {
+  console.log('Animation canceled');
+});
+
+animated.style.display = 'none';
+ +

同样, 使用 onanimationcancel 属性替换 addEventListener():

+ +
const animated = document.querySelector('.animated');
+animated.onanimationcancel = () => {
+  console.log('Animation canceled');
+};
+
+animated.style.display = 'none';
+ +

Live example

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">You chose a cold night to visit our planet.</p>
+    </div>
+    <button class="activate" type="button">Activate animation</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "Activate animation";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "Cancel animation";
+  } else {
+    applyAnimation.textContent = "Activate animation";
+  }
+});
+
+ +

Result

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}{{Spec2("CSS3 Animations")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.animationcancel_event")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf