SVGAnimationElement: endEvent 事件

endEvent 事件是 SVGAnimationElement 接口的事件，当动画到达活动结束时触发。

注意：此事件不会在每次动画重复的简单结束时触发。此事件可能在正常（即计划或交互式）时间轴播放过程中以及元素通过 DOM 方法结束时触发。

此事件不可取消，也不冒泡。

语法

在诸如 addEventListener() 之类的 方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("endEvent", (event) => {});

onend = (event) => {};

事件类型

一个 TimeEvent。继承自 Event.

Event TimeEvent

事件属性

TimeEvent.detail 只读

一个 long，指定事件的一些详细信息，具体取决于事件类型。对于此事件类型，它指示动画的重复次数。

TimeEvent.view 只读

一个 WindowProxy，用于标识生成事件的窗口。

示例

动画圆形

html
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<button>Stop animation</button>

<ul></ul>
css
ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}
js
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");
let btn = document.querySelector("button");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("endEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "endEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});

btn.addEventListener("click", () => {
  btn.disabled = true;
  animateElem.setAttribute("repeatCount", "1");
});

事件处理程序属性等效项

请注意，你还可以使用 onend 事件处理程序属性为 end 事件创建事件监听器

js
animateElem.onend = () => {
  console.log("endEvent fired");
};

规范

规范
可缩放矢量图形 (SVG) 2
# EndEvent

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅