如何在移动设备上的CSS或Javascript中平滑地设置动画高度

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

.box.expanded {
  height: 200px;
}

const box = document.querySelector('.box');

function animateHeight() {
  const currentHeight = parseFloat(getComputedStyle(box).height);
  const targetHeight = box.classList.contains('expanded') ? 100 : 200;

  if (currentHeight === targetHeight) {
    return;
  }

  const startTime = performance.now();
  const duration = 500;

  function updateHeight() {
    const now = performance.now();
    const progress = Math.min((now - startTime) / duration, 1);
    const newHeight = currentHeight + (targetHeight - currentHeight) * progress;

    box.style.height = `${newHeight}px`;

    if (progress < 1) {
      requestAnimationFrame(updateHeight);
    }
  }

  requestAnimationFrame(updateHeight);
}

box.addEventListener('click', () => {
  box.classList.toggle('expanded');
  animateHeight();
});