在 JavaScript 中使用 Element.animate() 更改动画计时功能

Question

我正在尝试使用Element.animate() function 中内置的 JavaScript 为 HTML div制作动画。遗憾的是，我还没有找到一种方法来更改与其他计时设置一起作为第二个参数解析的动画计时功能Element.animate()的 function。

到目前为止我的JavaScript代码：

// This variable declares all keyframes of the animation.
const animationKeyframes = [
    {transform: 'translateY(-100%)'},
    {transform: 'translateY(0%)'}
]

// This variable contains all animation options.
// There should be a way to specify a timing-function.
const animationOptions = {
    duration: 1000,
    iterations: 1
}

// Runns the animation for the div that I want to animate.
Element.animate(animationKeyframes, animationOptions)

上面的代码执行没有任何错误，并以线速度将div从页面顶部移动到底部。 但是，我希望速度在开始时缓入并在 animation 结束时缓出。

我试过：

• 添加animationTimingFunction: 'ease-in-out'到animationTiming常量

• 添加animation-timing-function: ease-in-out; 到div的CSS属性

到目前为止我唯一的来源： Mozilla Docs: Element.animate()

Answer 1

您可以在 animationOptions 中添加 'easing' 道具：

const animationOptions = {
    duration: 1000,
    iterations: 1,
    easing: 'ease-in-out'
}

可以在缓动属性中使用的其他值有：'ease'、'linear'、'ease-in'、'ease-out' 和 'ease-in-out'。

Answer 2

问题是 Element.animate 不是原生的 JavaScript 方法。 您正在寻找的方法是 element.animate。

确保首先获得对要设置动画的元素的引用，如下所示：

 const animationKeyframes = [ {transform: 'translateY(-100%)'}, {transform: 'translateY(0%)'} ]; const animationOptions = { duration: 1000, iterations: 1, easing: 'ease-in-out' }; const myDiv = document.querySelector('#myDiv'); myDiv.animate(animationKeyframes, animationOptions);

 <div id="myDiv">Div to animate</div>

或者，您可以使用 CSS 关键帧以 ease-in-out 时间 function 为 div 设置动画：

#myDiv {
  animation: myAnimation 1s ease-in-out 1;
}

@keyframes myAnimation {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}