當我嘗試使用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>