Element.getAnimations()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The getAnimations()
method of the Element
interface (specified on the Animatable
mixin) returns an array of all Animation
objects affecting this element or which are scheduled to do so in future. It can optionally return Animation
objects for descendant elements too.
Note: This array includes CSS Animations, CSS Transitions, and Web Animations.
Syntax
const animations = Element.getAnimations(options);
Parameters
options Optional
-
An options object containing the following property:
subtree
-
A boolean value which, if
true
, causes animations that target descendants of Element to be returned as well. This includes animations that target any CSS pseudo-elements attached to Element or one of its descendants. Defaults tofalse
.
Return value
An Array
of Animation
objects, each representing an animation currently targeting the Element
on which this method is called, or one of its descendant elements if { subtree: true }
is specified.
Examples
The following code snippet will wait for all animations on elem
and its descendants to finish before removing the element from the document.
Promise.all( elem.getAnimations({ subtree: true }) .map(animation => animation.finished) ).then(() => elem.remove());
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
getAnimations |
84
79
67-79
Does not support the
subtree option.44-67
Does not automatically flush pending style changes and does not support the
subtree option.38-44
Does not automatically flush pending style changes and does not support the
subtree option. |
84
79
|
75
63-75
|
No |
70
66
54-66
Does not support the
subtree option.31-54
Does not automatically flush pending style changes and does not support the
subtree option.25-31
Does not automatically flush pending style changes and does not support the
subtree option. |
13.1
11.1
Does not support the
subtree option. |
84 |
84
79
67-79
Does not support the
subtree option.44-67
Does not automatically flush pending style changes and does not support the
subtree option.38-44
Does not automatically flush pending style changes and does not support the
subtree option. |
79
63-79
|
60
57
48-57
Does not support the
subtree option.32-48
Does not automatically flush pending style changes and does not support the
subtree option.25-32
Does not automatically flush pending style changes and does not support the
subtree option. |
13.4
11.3
Does not support the
subtree option. |
14.0 |
See also
- Web Animations API
- CSS Animations
- CSS Transitions
-
Document.getAnimations()
- Fetch all animations in the document Animation
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations