diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index d1399ca7202177f..e934b2a0d884104 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -7516,7 +7516,6 @@ /en-US/docs/Web/API/Document/elementFromPoint /en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /en-US/docs/Web/API/Document/elementsFromPoint /en-US/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint /en-US/docs/Web/API/Document/firstElementChild /en-US/docs/Web/API/ParentNode/firstElementChild -/en-US/docs/Web/API/Document/getAnimations /en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations /en-US/docs/Web/API/Document/getSelection /en-US/docs/Web/API/DocumentOrShadowRoot/getSelection /en-US/docs/Web/API/Document/inputEncoding /en-US/docs/Web/API/document/characterSet /en-US/docs/Web/API/Document/lastElementChild /en-US/docs/Web/API/ParentNode/lastElementChild @@ -7558,6 +7557,7 @@ /en-US/docs/Web/API/DocumentFragment/lastElementChild /en-US/docs/Web/API/ParentNode/lastElementChild /en-US/docs/Web/API/DocumentOrShadowRoot/activeElement /en-US/docs/Web/API/Document/activeElement /en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement /en-US/docs/Web/API/Document/fullscreenElement +/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations /en-US/docs/Web/API/Document/getAnimations /en-US/docs/Web/API/DocumentOrShadowRoot/nodeFromPoint /en-US/docs/Web/API/DocumentOrShadowRoot /en-US/docs/Web/API/DocumentOrShadowRoot/nodesFromPoint /en-US/docs/Web/API/DocumentOrShadowRoot /en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureElement /en-US/docs/Web/API/Document/pictureInPictureElement diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 94bd18bdd77dbb9..de51048cd7d2a84 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -44334,19 +44334,6 @@ "jpmedley" ] }, - "Web/API/DocumentOrShadowRoot/getAnimations": { - "modified": "2020-12-13T19:52:52.030Z", - "contributors": [ - "sideshowbarker", - "Rumyra", - "mfuji09", - "birtles", - "fscholz", - "Sheppy", - "chrisdavidmills", - "rachelnabors" - ] - }, "Web/API/DocumentOrShadowRoot/getSelection": { "modified": "2020-10-15T21:49:28.182Z", "contributors": [ @@ -165798,5 +165785,18 @@ "david_ross", "jpmedley" ] + }, + "Web/API/Document/getAnimations": { + "modified": "2020-12-13T19:52:52.030Z", + "contributors": [ + "sideshowbarker", + "Rumyra", + "mfuji09", + "birtles", + "fscholz", + "Sheppy", + "chrisdavidmills", + "rachelnabors" + ] } -} +} \ No newline at end of file diff --git a/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html b/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html index 4eff58b8f84851a..b0b93952fc7f588 100644 --- a/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html +++ b/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html @@ -422,7 +422,7 @@
The following are exemplary examples of Interface pages:
Animation.timeline
getter, Document.timeline
, DocumentTimeline
, and AnimationTimeline
features are now enabled by default ({{bug(1619178)}}).Document.getAnimations()
and Element.getAnimations()
methods are now enabled by default ({{bug(1619821)}}).Document.getAnimations()
and Element.getAnimations()
methods are now enabled by default ({{bug(1619821)}}).JavaScript is often used to control <canvas> elements and SVGs. Most JavaScript code that applies to HTML5 video also applies to audio. HTMLMediaElement.playbackRate
is used to implement user controls for the playback rate for both video and audio. A value of 1.0 is default and considered normal speed; a value of 0.5 is half the speed, a value of 2.0 is twice the speed. A negative number plays the video or audio backwards. Set the playback rate property: HTMLMediaElement.playbackRate = playbackspeed
document.getAnimations() is an experimental technology, and includes CSS Animations, CSS Transitions, and Web Animations. The MDN document, Document.getAnimations() provides the following code sample of how to slow down all animations on a page to half speed.
+document.getAnimations() is an experimental technology, and includes CSS Animations, CSS Transitions, and Web Animations. The MDN document, Document.getAnimations() provides the following code sample of how to slow down all animations on a page to half speed.
document.getAnimations().forEach( function (animation) { diff --git a/files/en-us/web/api/documentorshadowroot/getanimations/index.html b/files/en-us/web/api/document/getanimations/index.html similarity index 73% rename from files/en-us/web/api/documentorshadowroot/getanimations/index.html rename to files/en-us/web/api/document/getanimations/index.html index 83296629e1c0df7..5674129e10eb20d 100644 --- a/files/en-us/web/api/documentorshadowroot/getanimations/index.html +++ b/files/en-us/web/api/document/getanimations/index.html @@ -1,23 +1,22 @@ --- -title: DocumentOrShadowRoot.getAnimations() -slug: Web/API/DocumentOrShadowRoot/getAnimations +title: Document.getAnimations() +slug: Web/API/Document/getAnimations tags: -- API -- Animation -- CSS -- CSS Animations -- CSS Transitions -- Document -- Experimental -- Method -- Reference -- Transitions -- Web Animations -- getAnimations -- waapi -- web animations api + - API + - Animation + - CSS + - CSS Animations + - CSS Transitions + - Document + - Method + - Reference + - Transitions + - Web Animations + - getAnimations + - waapi + - web animations api --- -{{ SeeCompatTable() }}{{APIRef("Web Animations")}}
+{{APIRef("Web Animations")}}
The
getAnimations()
method of the {{domxref("Document")}} interface returns an array of all {{domxref("Animation")}} objects currently in effect whose @@ -28,8 +27,7 @@Syntax
-var allAnimations = Document.getAnimations(); -+getAnimations();Parameters
@@ -58,16 +56,11 @@Specifications
Specification -Status -Comment - diff --git a/files/en-us/web/api/document/index.html b/files/en-us/web/api/document/index.html index 23438fe4c17b8bd..bf14e6b850a1842 100644 --- a/files/en-us/web/api/document/index.html +++ b/files/en-us/web/api/document/index.html @@ -248,6 +248,8 @@{{SpecName('Web Animations', '#dom-animatable-getanimations', - 'document.getAnimations()' )}} -{{Spec2('Web Animations')}} -+ {{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}} Methods
document
.document
{{APIRef("Web Animations")}}
+ +The getAnimations()
method of the {{domxref("ShadowRoot")}} interface
+ returns an array of all {{domxref("Animation")}} objects currently in effect whose
+ target elements are descendants of the shadow tree. This array includes CSS Animations, CSS Transitions, and Web Animations.
getAnimations();+ +
None.
+ +An {{jsxref("Array")}} of {{domxref("Animation")}} objects, each representing one + animation currently associated with elements which are descendants of the + {{domxref("ShadowRoot")}} on which it's called.
+ +The following code snippet will slow down all animations in a shadow tree by halving their + {{domxref("Animation.playbackRate")}}.
+ ++let customElem = document.querySelector('my-shadow-dom-element'); +let shadow = customElem.shadowRoot; +shadow.getAnimations().forEach( + function (animation) { + animation.playbackRate *= .5; + } +);+ +
Specification | +
---|
{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}} | +
{{Compat("api.ShadowRoot.getAnimations")}}
+ +The ShadowRoot
interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.
Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That’s impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("DocumentOrShadowRoot.getAnimations")}} method to loop over each animation on the page and halve their playbackRate
s, like so:
Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That’s impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("Document.getAnimations")}} method to loop over each animation on the page and halve their playbackRate
s, like so:
document.getAnimations().forEach( function (animation) {