将 div 动画代码转换为 vanilla JS

Question

在我的项目中，我需要为一些元素设置动画，通过动画改变它的高度，我不允许使用 jQuery。我很难将以下代码（仅动画部分）转换为 vanilla js:

$("#button").click(function() {
  $("#div").height(20).animate({
    height: 50
  }, 200);
})

Answer 1

Vanilla JS 没有任何动画例程。为此，您需要编写自己的计时器以按要求的时间间隔更新元素的属性。

然而，更好的选择是在 CSS 中制作动画并使用 JS 简单地向触发动画的元素添加一个 class，如下所示：

document.getElementById('button').addEventListener('click', function() {
  document.getElementById('div').classList.add('foo');
})

#div {
  height: 20px;
  width: 50px;
  border: 1px solid red;
  transition: height 0.2s;
}
#div.foo {
  height: 50px;
}

<div id="div"></div>
<button id="button">animate height</button>

请注意 #div 上的 transition 规则是这里的动画魔术。

Converting div animation code to vanilla JS