我試圖在動畫完成后調用commitStyles()，以便樣式以一種可執行的方式保留在末尾(通過添加到內聯樣式)。然而，調用commitStyles似乎什么都不會發生，元素只是在動畫之后返回到它的初始樣式。

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.finished.then(() => a.commitStyles());
});

<div id="target">I can move</div>
<button>Move it</button>

動畫的默認填充是& quot無& quot，它使元素在動畫完成后恢復到其原始樣式。此時調用commitStyles基本上沒有任何作用。

相反，您可以使用& quot轉發& quot填充以保留動畫后的樣式。然后，在動畫結束后調用commitStyles()，并立即取消動畫，以確保它不再消耗資源。注意，設置填充本身可以達到持久化樣式的效果，但是有幾個缺點；例如，很難更改動畫設置的元素的任何樣式(不使用commitStyles ),瀏覽器必須無限期地維護動畫。

document.querySelector("button").addEventListener("click", evt => {
  document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], {
    duration: 1000,
    fill: "forwards"
  }).finished.then(a => {
    a.commitStyles();
    a.cancel();
  });
});

<div id="target">I can move</div>
<button>Move it</button>