initial commit

1 files changed, 174 insertions, 0 deletions

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
+---
+<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>