↑

DOM

：

インターフェイス

：

Animation.persist() メソッド

　編集：2022.10.22 by T.A.

[Edge]。→●、mdn、mdn（en-US）

Web アニメーション Animation を明示的に永続化します。

mdn： ブラウザの塗りつぶしアニメーションを自動的に削除する動作により、そうでなければ削除される場合。

構文
Animation.persist()
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。

テスト
HTML：


ここにHTMLが表示される
⯈スクリプト組み込み：
JavaScript：


JavaScript：



表示内容：
表示内容：