当我尝试使用 setTimeout() 对其进行动画处理时，div 不会变小？答案

【问题标题】：The div doesn't get smaller when i try to animate it with setTimeout()?当我尝试使用 setTimeout() 对其进行动画处理时，div 不会变小？
【发布时间】：2018-07-27 21:12:59
【问题描述】：

div.addEventListener('click', () => {
        for (let i=1; i<3000; i++) {
          setTimeout(() => {

            let style = div.clientHeight-1;

            style = style + 'px'; 
            div.style.height = style;

          },i)
        }

    })

为什么这段代码不起作用？我有一个 div 元素 500x500，我尝试为它的高度设置动画。当我设置let style = div.clientHeight - 2; 或大于2的数字时，它可以工作，但它不适用于1。问题是什么，如何正确使用JS为高度设置动画？

【问题讨论】：

删除for 和setTimeout。请改用setInterval。
你也可以用 css 做到这一点。容易多了。
@MarkBaijens 我知道如何用 css 转换来做，但我想用 Javascript 来做，这更像是一个练习。但我不知道为什么代码不起作用。你有什么想法吗？
我去看看。
查看这个类似的帖子 stackoverflow.com/questions/44467909/…>。让我知道这是否有帮助！

标签： javascript html css

【解决方案1】：

您可以使用最少的 Javascript 并改用 CSS 来做到这一点。

将transition: height 3s; 添加到您的<div> 并创建一个更改<div> 高度的类。

点击后，只需在Javascript中添加类：

let div = document.querySelector('div');

div.addEventListener('click', () => {
  div.classList.add('clicked');
})

div{
  border: 1px solid black;
  height:100px;
  transition: height 3s;
}

div.clicked{
  height: 3000px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：