DOM

：

：

Element.getAnimations() メソッド

　編集：2022.10.10 by T.A.

[Edge]。実験的。→、

実験的： これは実験的技術です。これを本番環境で使用する前に、ブラウザの互換性テーブルを注意深く確認してください。

element にスケジュールされている全てのアニメーション オブジェクトを配列で返します。¶スケジュールはスクリプトによるもの？。

mdn： Element インターフェイスの getAnimations() メソッド（アニメーション化可能なミックスインで指定）は、この要素に影響を与える、または将来そうするようにスケジュールされているすべてのアニメーション オブジェクトの配列を返します。オプションで、子孫要素のアニメーション オブジェクトを返すこともできます。

注： この配列には、CSSアニメーション、CSSトランジション、およびWebアニメーションが含まれます。

構文
element.getAnimations([options])
element Element。
options 省略可。次のプロパティを含むオプション オブジェクト：
subtree Boolean。trueの場合、Elementの子孫をターゲットとするアニメーションも返されます。 これには、Element またはその子孫の 1 つにアタッチされた CSS 疑似要素を対象とするアニメーションが含まれます。デフォルトはfalseです。
戻り値

アニメーション オブジェクトの配列。それぞれが、このメソッドが呼び出される要素、または {subtree：true} が指定されている場合はその子孫要素の 1 つを現在ターゲットにしているアニメーションを表します。

例
mdn

elemとその子孫のすべてのアニメーションが終了するのを待ってから、ドキュメントから要素を削除します。 

Promise.all(
  elem.getAnimations({ subtree: true })
    .map(animation => animation.finished)
).then(() => elem.remove());
簡単な動作

HTML： 

<SPAN id=IdTest style="position:relative;
  left:0;
  transition:all 3s 0s;
">■</SPAN>
<BUTTON onclick="IdTest.style.left='200px'">スタート</BUTTON>

JavaScript： 

D=IdTest.getAnimations() //＝[object]：

なにも得られず。

アニメーションらしく？

以下のCSSが組み込んであります： 


 
HTML：
 
<SPAN id=IdTest style="position:relative;
  left:0px;
  animation:3s linear 5s TestKF;
">■</SPAN>


 
JavaScript：
 
D=IdTest.getAnimations() //＝[object]：


 
何も得られず。




スクリプトでアニメーション組み込み



 
HTML：
 
<SPAN id=IdTest style="position:relative;">■</SPAN>


 
JavaScript：
 
IdTest.animate([
  { // from
    opacity:0,
    left:0
  },
  { // to
    opacity:1,
    left:'100px'
  }
],2000)
D=IdTest.getAnimations(); //＝[object]：[object Animation]
	//0＝[object]：[object Animation]


 
得られた。









テスト