将div动画代码转换为vanilla JS

Question

在我的项目中，我需要为某个元素设置动画，使用动画更改其高度，并且我不允许使用jQuery。我很难将以下代码（仅限动画部分）转换为vanilla js：

jsfiddle

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

Answer 1

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

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

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>

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