js实现改变盒子大小有缓冲

要实现盒子大小有缓冲的效果，可以使用JavaScript的`setInterval`函数和缓动算法。

以下是一个简单的实现示例：

HTML:

<div id="box"></div>
<button onclick="changeBoxSize()">改变盒子大小</button>

CSS:

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease-out;
}

JavaScript:

function changeBoxSize() {
  var box = document.getElementById("box");
  var targetWidth = Math.floor(Math.random() * 300) + 50;
  var targetHeight = Math.floor(Math.random() * 300) + 50;
  var interval = setInterval(function() {
    var currentWidth = box.offsetWidth;
    var currentHeight = box.offsetHeight;
    var distanceWidth = targetWidth - currentWidth;
    var distanceHeight = targetHeight - currentHeight;
    var speedWidth = distanceWidth / 10;
    var speedHeight = distanceHeight / 10;
    if (Math.abs(distanceWidth) < 1 && Math.abs(distanceHeight) < 1) {
      clearInterval(interval);
    } else {
      box.style.width = currentWidth + speedWidth + "px";
      box.style.height = currentHeight + speedHeight + "px";
    }
  }, 20);
}

在这个示例中，当点击按钮时，`changeBoxSize`函数会被调用。这个函数会使用`setInterval`函数来逐步改变盒子的大小，直到达到目标大小。在每个时间间隔中，我们会计算当前大小和目标大小之间的距离，并根据距离计算出盒子每次缩放的速度，然后用这个速度逐步改变盒子的大小。这个过程会在`setInterval`函数中一直进行，直到盒子的大小达到目标大小，然后我们会使用`clearInterval`函数停止这个过程。