SVGAnimationElement: sự kiện endEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sự kiện endEvent của giao diện SVGAnimationElement được kích hoạt khi đạt đến phần cuối hoạt động của hoạt hình.

Note: Sự kiện này không được kích hoạt ở cuối đơn giản của mỗi lần lặp lại hoạt hình. Sự kiện này có thể được kích hoạt cả trong quá trình phát dòng thời gian bình thường (tức là theo lịch hoặc tương tác) cũng như trong trường hợp phần tử được kết thúc bằng phương thức DOM.

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.

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

onend = (event) => { }

Loại sự kiện

Một TimeEvent. Kế thừa từ Event.

Thuộc tính sự kiện

TimeEvent.detail Read only: Một long chỉ định một số thông tin chi tiết về Sự kiện, tùy thuộc vào loại sự kiện. Đối với loại sự kiện này, cho biết số lần lặp lại của hoạt hình.
TimeEvent.view Read only: Một WindowProxy xác định cửa sổ mà sự kiện được tạo ra.

Ví dụ

Vòng tròn hoạt hình

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

Tương đương với thuộc tính trình xử lý sự kiện

Lưu ý rằng bạn cũng có thể tạo trình xử lý sự kiện cho sự kiện end bằng thuộc tính trình xử lý onend:

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

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2 # EndEvent

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content