ShadowRoot: getAnimations() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年9月以降、すべてのブラウザーで利用可能です。
getAnimations() は ShadowRoot のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての Animation オブジェクトの配列を返します。この配列には CSS アニメーション、CSS トランジション、ウェブアニメーション が含まれています。
構文
js
getAnimations()
引数
なし。
返値
Animation オブジェクトの配列 (Array) で、それぞれが呼び出された ShadowRoot の子孫である要素に現在関連付けられた 1 つのアニメーションを表します。
例
次のコードでは、シャドウツリーにあるすべてのアニメーションの Animation.playbackRate を半分にすることで、アニメーションの速度を下げます。
js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
shadow.getAnimations().forEach((animation) => {
animation.playbackRate *= 0.5;
});
仕様書
| 仕様書 |
|---|
| Web Animations> # dom-documentorshadowroot-getanimations> |
ブラウザーの互換性
関連情報
- Web Animations API
- CSS アニメーション
- CSS トランジション
Element.getAnimations()- 単一のElementとその配下のアニメーションのみを読み取ります。Animation