这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
动画
接口的
onremove
property (from the
Web 动画 API
) is the event handler for the
remove
event. This event is sent when the animation is removed (i.e., put into an
active
replace state).
var removeHandler = animation.onremove; animation.onremove = removeHandler;
A function to be called to handle the
remove
event, or
null
if no
remove
event handler is set.
In our simple replace indefinite animations demo , you can see the following code:
const divElem = document.querySelector('div');
document.body.addEventListener('mousemove', evt => {
let anim = divElem.animate(
{ transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` },
{ duration: 500, fill: 'forwards' }
);
anim.commitStyles();
//anim.persist()
anim.onremove = function() {
console.log('Animation removed');
}
console.log(anim.replaceState);
});
Here we have a
<div>
element, and an event listener that fires the event handler code whenever the mouse moves. The event handler sets up an animation that animates the <div> element to the position of the mouse pointer. This could result in a huge animations list, which could create a memory leak. For this reason, modern browsers automatically remove overriding forward filling animations.
A console message is logged each time an animation it removed, invoked when the
remove
event is fired.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'Animation.onremove' in that specification. |
工作草案 | 编者草案。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
onremove
|
Chrome
不支持
No
注意事项
|
Edge 不支持 No | Firefox 75 | IE 不支持 No | Opera 不支持 No | Safari 13.1 | WebView Android 不支持 No |
Chrome Android
不支持
No
注意事项
|
Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 13.4 | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
动画