javascript - 单击按钮后在某个时间范围内调整 div 元素的大小。我使用javascript还是有更简单的方法

Question

您好，我想知道在单击按钮后 5 秒的时间范围内调整 div 大小的最佳方法是什么。执行此 javascript 或 jquery 的最佳解决方案是什么

Answer 1

您必须使用 JavaScript 才能在单击按钮时执行任何操作。

如果是我 - 我会在单击时向 div 添加一个类，并设置一个超时时间来删除该类。该类将具有会影响 div 大小的更改样式。在此演示中 - 我将目标 div 设为两倍大，持续 2 秒，然后删除类以将 div 返回到正常状态。

请注意，有多种方法可以更改 div 的大小，但您需要使用 javascript 来触发它们。你不需要 jQuery 库，只是这个，直接 js 就可以做到。您应该研究一些影响 DOM 元素的时髦 CSS 方法，以获得良好的平滑过渡或更改。

function alterSize(type) {
 var targetDiv = document.querySelector("#target-div");
 targetDiv.classList.add(type);
 setTimeout(function(){
  targetDiv.classList.remove(type);
  }, 2000)
}

#target-div {
height: 100px;
width: 100px;
border: solid 1px blue;
background: #efefef;
transition: all 0.5s ease-in-out;
}

#target-div.small {
height: 50px;
width: 50px;
}

#target-div.large {
height: 200px;
width: 200px;
}

<button type="button" onclick="alterSize('small')">Click me to decrease the size</button>

<button type="button" onclick="alterSize('large')">Click me to increase the size</button>
<hr/>
<div id="target-div">