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

Question

我正在努力寻找普通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

您的quotetimingKeyframeEffect 对象将是正确的位置。
不确定你做错了什么，你需要的是设置属性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>