我很难找到 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
并在将来实现上述请求,那么我应该考虑其他类似的方法吗?
1条答案
按热度按时间yr9zkbsy1#
quotetiming
KeyframeEffect对象将是正确的位置。不确定您做错了什么,您需要设置
fill
属性: