javascript 如何在animate函数vanilla JS的参数中设置动画填充模式?

5f0d552i  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(136)

我很难找到 vanilla JavaScript中允许我设置animation-fill-mode的方法的文档或示例。我使用Element.animate(animation, timing)函数来实现这一点。
我尝试过将animation-fill-mode添加到timing对象的条目中,但根据我的测试,它不是一个有效的参数。我还尝试过在完成时同时使用Animation.onfinishAnimation.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并在将来实现上述请求,那么我应该考虑其他类似的方法吗?

yr9zkbsy

yr9zkbsy1#

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>

相关问题