DOM

：

：

Animation.commitStyles() メソッド

　編集：2022.10.22 by T.A.

[Edge]。→、、

Web アニメーション Animation の終了スタイル状態をアニメーション化されている要素に保持（mdn：コミット）します。

そのアニメーションが削除された後でも。これにより、アニメーション化されている要素にスタイルの終了状態が書き込まれます。スタイル属性内のプロパティの形式で。

構文
Animation.commitStyles()
Animation Animation
戻り値

なし（undefined）。

例
mdnより

私たちのシンプルな「」では、次のコードを確認できます： 

const divElem = document.querySelector("div");

document.body.addEventListener("mousemove", (evt) => {
  const anim = divElem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 500, fill: "forwards" }
  );

  anim.commitStyles();

  //anim.persist()

  anim.onremove = (event) => {
    console.log("Animation removed");
  };

  console.log(anim.replaceState);
});
persist()、commitStyles()

HTML： 

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

JavaScript： 

document.body.addEventListener("mousemove", (evt) => {
  let anim=IdTest.animate(
    { transform:"translate("+evt.clientX+"px, "+evt.clientY+"px)"},
    { duration:1000, fill:"forwards" }
  );
  anim.commitStyles();
  //anim.persist();
  anim.onremove=(event) => {
    IdLog.innerHTML="アニメーションが削除されました　";
  };
  IdLog.innerHTML=IdLog.innerHTML+anim.replaceState+"　";
});

anim.persist(); を入れてみると動作が異なる。削除（前回の「IdTest.animate()」が更新）されても残っているようです。

→addEventListener()。

→animate()。commitStyles()。remove イベント。replaceState。

→CSS：transform。CSS：translate。

テスト