files/zh-cn/web/api/htmlelement/animationcancel_event/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

---
title: 'HTMLElement: animationcancel event'
slug: Web/API/HTMLElement/animationcancel_event
translation_of: Web/API/HTMLElement/animationcancel_event
---
<div>{{APIRef}}</div>

<div>{{SeeCompatTable}}</div>

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

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

<table class="properties">
 <tbody>
  <tr>
   <th>Bubbles</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th>Cancelable</th>
   <td>No</td>
  </tr>
  <tr>
   <th>Interface</th>
   <td>{{domxref("AnimationEvent")}}</td>
  </tr>
  <tr>
   <th>Event handler property</th>
   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code></td>
  </tr>
 </tbody>
</table>

<h2 id="Examples">Examples</h2>

<p>这段代码获取一个当前在动画中的元素，并为它添加了一个<code>animationcancel</code> 事件监听. 然后设置该元素的 <code><a href="/en-US/docs/Web/CSS/display">display</a></code> 属性为 <code>none</code>, 触发 <code>animationcancel</code> 事件.</p>

<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">animated</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'.animated'</span>);
</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">addEventListener</span>(<span class="cm-string">'animationcancel'</span>, () <span class="cm-operator">=&gt;</span> {</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">  console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Animation canceled'</span>);</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">});</span></span></span>

<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">style</span>.<span class="cm-property">display</span> <span class="cm-operator">=</span> <span class="cm-string">'none'</span>;</span></span></span></pre>

<p>同样, 使用 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> 属性替换 <code>addEventListener()</code>:</p>

<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">animated</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'.animated'</span>);</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">onanimationcancel</span> <span class="cm-operator">=</span> () <span class="cm-operator">=&gt;</span> {</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">  console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Animation canceled'</span>);</span></span></span>
<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">};</span></span></span>

<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">style</span>.<span class="cm-property">display</span> <span class="cm-operator">=</span> <span class="cm-string">'none'</span>;</span></span></span></pre>

<h3 id="Live_example">Live example</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="animation-example"&gt;
    &lt;div class="container"&gt;
        &lt;p class="animation"&gt;You chose a cold night to visit our planet.&lt;/p&gt;
    &lt;/div&gt;
    &lt;button class="activate" type="button"&gt;Activate animation&lt;/button&gt;
    &lt;div class="event-log"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: 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);
  }
}
</pre>

<h4 id="JS">JS</h4>

<pre class="brush: js">const animation = document.querySelector('p.animation');
const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
let iterationCount = 0;

animation.addEventListener('animationstart', () =&gt; {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});

animation.addEventListener('animationiteration', () =&gt; {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener('animationend', () =&gt; {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove('active');
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener('animationcancel', () =&gt; {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener('click', () =&gt; {
  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";
  }
});
</pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>


<p>{{Compat("api.HTMLElement.animationcancel_event")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
 <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li>
 <li>{{domxref("AnimationEvent")}}</li>
 <li>Related events: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></li>
 <li>This event on <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">Document</a></code> targets: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/animationcancel_event">animationcancel</a></code></li>
 <li>This event on <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> targets: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/animationcancel_event">animationcancel</a></code></li>
</ul>