当我尝试使用setTimeout()为它设置动画时,div不会变小？

Question

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动画高度？

Answer 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;
}

<div></div>