DOM

：

：

Animation.finished プロパティ

　編集：2022.10.21 by T.A.

[Edge]。読取専用。→、、

アニメーション Animation の再生が終了すると解決される Promise を返します。

注： アニメーションが終了した再生状態を離れるたびに (つまり、再生が再開されたとき)、このプロパティに対して新しい Promise が作成されます。新しいアニメーション シーケンスが完了すると、新しい Promise が解決されます。

構文
Animation.finished
Animation Animation
値

アニメーションの実行が終了すると解決される Promise オブジェクト。

例
mdnより

次のコードは、要素 elem で実行されているすべてのアニメーションが終了するまで待機します。次に、要素を DOM ツリーから削除します。 

Promise.all(elem.getAnimations().map((animation) => animation.finished)).then(
  () => elem.remove()
);
簡単な Web アニメーションと finished

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

KF=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //3000ms掛けて、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。
Ani.play();
Promise.all(IdTest.getAnimations().map((ani) => ani.finished)).then(
  () => {
    IdTest.remove();
    D="完了";
  }
);

→KeyframeEffect()、CSS：transform。CSS：translateX()。duration、fill。play()。

→Promise、all、getAnimations()、map()、then()。

テスト