javascript - 如何设置 .animate 函数 vanilla JS 参数中的动画填充模式？

Question

我正在努力寻找 vanilla JavaScript 中允许我设置 animation-fill-mode 的方法的文档或示例。我正在使用 Element.animate(animation, Timing) 函数来实现此目的。

我尝试将 animation-fill-mode 添加到 timing 对象的条目中，但根据我的测试，它不是有效参数。我还尝试同时使用 Animation.onfinish 和 Animation.pause() 在完成时暂停它，但这也不起作用。这是它使用的所有代码:

const quotemove = [
    { transform: "translate(0vw) rotate(0deg)" },
    { transform: "translate(80vw) rotate(180deg)" }
]

const quotetiming = {
    duration: 1000,
    iterations: 1,
    // this is where i attempted to add fill mode    
}

const quoteholders = document.getElementsByClassName("quote")
for(let i = 0; i < quoteholders.length; i++) {
    let quoteholder = quoteholders.item(i)
    const quotemark = quoteholder.querySelector(".quotationmark")
    quoteholder.addEventListener("mouseover", () => {
        let animation = quotemark.animate(quotemove, quotetiming)
    })     
}

我还应该提到，我打算向 mouseout 事件添加另一个动画，以便在您悬停时它保持在一个位置，而在不悬停时保持另一个位置。

如果无法将填充模式设置为forwards并在将来实现上述请求，那么我是否应该考虑另一种类似的方法？我很感激。

Answer 1

您的 quotetiming KeyframeEffect 对象就是正确的位置。
不确定你做错了什么，你需要的是设置 fill 属性:

const quotemove = [
    { transform: "translate(0vw) rotate(0deg)" },
    { transform: "translate(80vw) rotate(180deg)" }
]

const quotetiming = {
    duration: 1000,
    iterations: 1,
    fill: "forwards"
}

const quoteholders = document.getElementsByClassName("quote")
for(let i = 0; i < quoteholders.length; i++) {
    let quoteholder = quoteholders.item(i)
    const quotemark = quoteholder.querySelector(".quotationmark")
    quoteholder.addEventListener("mouseover", () => {
        let animation = quotemark.animate(quotemove, quotetiming)
    })     
}

.quote {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: lightgray;
}
blockquote {
  background: ivory;
  transform-origin: center;
  display: inline-block;
}

<div class="quote">
  <blockquote class="quotationmark">Hover the page</blockquote>
</div>