SVGAnimationElement: endEvent 事件
SVGAnimationElement 介面的 endEvent 事件在動畫達到活動結束時觸發。
注意： 此事件不會在每次動畫重複的簡單結束時引發。此事件可能在正常（即，計劃的或互動式的）時間線播放過程中引發，也可能在元素透過 DOM 方法結束時引發。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("endEvent", (event) => { })
onend = (event) => { }
事件型別
事件屬性
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 #dddddd;
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");
};
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # EndEvent |
瀏覽器相容性
載入中…