SVGAnimationElement: событие endEvent

Событие endEvent интерфейса SVGAnimationElement срабатывает при достижении активного конца анимации.

Примечание: Это событие не срабатывает в конце каждого повтора анимации. Это событие может быть вызвано как в ходе обычной (т.е. запланированной или интерактивной) работы временной шкалы, так и в случае, если элемент был завершён с помощью метода DOM.

Это событие не может быть отменено и не распространяется.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите обработчик событий.

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

onend = (event) => {};

Тип события

Объект TimeEvent. Наследуется от Event.

Свойства события

TimeEvent.detail Только для чтения: Значение, которое указывает некоторую детальную информацию о событии, в зависимости от типа события. Для этого типа события указывает номер повтора анимации.
TimeEvent.view Только для чтения: Объект WindowProxy, который идентифицирует окно, из которого было сгенерировано событие.

Примеры

Анимированный круг

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

ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}

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");
});

Эквивалент свойства обработчика событий

Обратите внимание, что вы также можете создать обработчик событий для события end с помощью свойства обработчика событий onend.

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

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # EndEvent

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`endEvent_event`	35 31–35 Свойство обработчика событий `onend` не поддерживается.	79	93 6–93 Свойство обработчика событий `onend` не поддерживается.	22 18–22 Свойство обработчика событий `onend` не поддерживается.	10 Свойство обработчика событий `onend` не поддерживается.	35 31–35 Свойство обработчика событий `onend` не поддерживается.	93 6–93 Свойство обработчика событий `onend` не поддерживается.	22 18–22 Свойство обработчика событий `onend` не поддерживается.	10 Свойство обработчика событий `onend` не поддерживается.	3.0 2.0–3.0 Свойство обработчика событий `onend` не поддерживается.	37 4.4.3–37 Свойство обработчика событий `onend` не поддерживается.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement/endEvent_event