Animation: remove event
The remove
event of the Animation
interface fires when the animation is removed (i.e., put into an active
replace state).
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('remove', event => { })
onremove = event => { }
Event type
An AnimationPlaybackEvent
. Inherits from Event
.
Event properties
In addition to the properties listed below, properties from the parent interface, Event
, are available.
AnimationPlaybackEvent.currentTime
Read only-
The current time of the animation that generated the event.
AnimationPlaybackEvent.timelineTime
Read only-
The time value of the timeline of the animation that generated the event.
Examples
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 = event => { 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.
Specifications
Specification |
---|
Web Animations # dom-animation-onremove |
Web Animations # remove-event |
Browser compatibility
BCD tables only load in the browser