sync with english version for animationend event (#10558)

files/zh-cn/web/api/element/animationend_event/index.md

@@ -1,27 +1,148 @@
 ---
-title: GlobalEventHandler.onanimationend
+title: 元素：animationend 事件
 slug: Web/API/Element/animationend_event
 ---
 
-## 概述
+{{APIRef}}
 
-事件处理程序。当 CSS 动画到达其活动期的结束时发送此事件
+**`animationend`**（**动画结束**）事件在 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_Animations)完成时触发。如果在动画完成前中止了动画，例如将元素从 DOM 中移除，或将动画从元素上移除，`animationend` 事件不会触发。
 
 ## 语法
 
-```plain
-var animEndHandler = target.onanimationend;
+在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 方法中使用事件名称，或设置事件处理器属性。
 
-target.onanimationend = 事件处理函数
+```js
+addEventListener('animationend', (event) => {});
+
+onanimationend = (event) => { };
 ```
 
-### 值
+## 事件类型
+
+{{domxref("AnimationEvent")}}。继承自 {{domxref("Event")}}。
+
+{{InheritanceDiagram("AnimationEvent")}}
+
+## 事件属性
+
+_也从其父接口 {{domxref("Event")}} 继承属性_。
+
+- {{domxref("AnimationEvent.animationName")}} {{ReadOnlyInline}}
+  - : 一个字符串，包含了生成动画的 {{cssxref("animation-name")}} 的值。
+- {{domxref("AnimationEvent.elapsedTime")}} {{ReadOnlyInline}}
+  - : 一个浮点数（`float`），表示动画运行的时间（以秒为单位）。此事件的这个属性并不包括动画暂停的时间。对于 `animationstart` 事件，`elapsedTime` 的值为 `0.0`（除非将 {{cssxref("animation-delay")}} 设置成了一个负值，在这种情况下，`elapsedTime` 为 `(-1 * delay)`）。
+- {{domxref("AnimationEvent.pseudoElement")}} {{ReadOnlyInline}}
+  - : 一个字符串，以 `'::'` 开头，包含了动画运行时所在的[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)的名称。如果动画不是在伪元素而是在元素上运行，则为空字符串：`''`。
+
+## 示例
+
+该实例获取一个正在绘制动画的元素，并监听 `animationend` 事件。
+
+```js
+const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationend', () => {
+  console.log('Animation ended');
+});
+```
+
+同上，但使用 `onanimationend` 事件处理器属性：
+
+```js
+const animated = document.querySelector('.animated');
+
+animated.onanimationend = () => {
+  console.log('Animation ended');
+};
+```
+
+### 运行实例
+
+#### HTML
 
-当*`target`*(HTML 元素，document 或者 window) 的 CSS 动画已经开始，[`animationend`](/zh-CN/docs/Web/API/Element/animationend_event)事件会触发同时`事件处理函数`会被调用。`事件处理函数`会接收到唯一的参数：{{domxref("AnimationEvent")}} 描述发生的事件。
+```html
+<div class="animation-example">
+  <div class="container">
+    <p class="animation">你选择了一个寒冷的夜晚到访我们的星球。</p>
+  </div>
+  <button class="activate" type="button">激活动画</button>
+  <div class="event-log"></div>
+</div>
+```
+
+#### CSS
+
+```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 {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+```
+
+#### JavaScript
+
+```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.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'动画迭代轮次：${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'动画结束'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "激活动画";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'动画已被取消'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  const active = animation.classList.contains('active');
+  applyAnimation.textContent = active ? "取消动画" : "激活动画";
+});
+```
 
-## 例子
+#### 结果
 
-{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}
+{{ EmbedLiveSample('运行实例', '100%', '150px') }}
 
 ## 规范
 
@@ -31,8 +152,11 @@ target.onanimationend = 事件处理函数
 
 {{Compat}}
 
-## 参考
+## 参见
 
-- The [`animationend`](/zh-CN/docs/Web/API/Element/animationend_event) event this event handler is triggered by
+- [CSS 动画](/en-US/docs/Web/CSS/CSS_Animations)
+- [使用 CSS 动画](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
 - {{domxref("AnimationEvent")}}
-- The [`animationstart`](/zh-CN/docs/Web/API/Element/animationstart_event) event
+- 相关事件：{{domxref("Element/animationstart_event", "animationstart")}}, {{domxref("Element/animationcancel_event", "animationcancel")}}, {{domxref("Element/animationiteration_event", "animationiteration")}}
+- 以 {{domxref("Document")}} 为目标的此事件：{{domxref("Document/animationend_event", "animationend")}}
+- 以 {{domxref("Window")}} 为目标的此事件：{{domxref("Window/animationend_event", "animationend")}}