快速点击时按钮缩放动画异常，寻求非禁用按钮的解决方案

问题根源在于快速点击时，前一次的定时器被清除，但按钮的放大状态未及时重置，导致一直保持放大状态，仅最后一次定时器触发时才恢复。以下是两种可靠的解决方案：

方案一：结合CSS过渡与类控制 #

利用CSS原生过渡替代直接操作样式，稳定性更强：

1. 给按钮添加基础样式：

button {
  transition: transform 0.3s ease;
}
button.active {
  transform: scale(var(--scale-size));
}

2. 修改Svelte中的点击处理函数：

let timeoutId = null;

const btnAnimation = (e, size) => {
  const button = e.currentTarget;
  
  // 清除之前的定时器并重置状态
  if (timeoutId) {
    clearTimeout(timeoutId);
    button.classList.remove('active');
    // 强制触发浏览器重绘，确保过渡能重新生效
    void button.offsetWidth;
  }

  // 设置放大尺寸并激活动画类
  button.style.setProperty('--scale-size', size);
  button.classList.add('active');

  // 定时恢复原尺寸
  timeoutId = setTimeout(() => {
    button.classList.remove('active');
    timeoutId = null;
  }, 300);
};

方案二：使用CSS动画（无需定时器） #

完全依赖CSS动画处理，避免定时器带来的状态维护问题：

1. 定义CSS动画：

@keyframes scaleAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(var(--scale-size)); }
  100% { transform: scale(1); }
}

button.animate {
  animation: scaleAnimation 0.6s ease forwards;
}

2. 简化点击处理函数：

const btnAnimation = (e, size) => {
  const button = e.currentTarget;
  
  // 设置放大尺寸
  button.style.setProperty('--scale-size', size);
  
  // 先移除动画类，再重新添加以触发动画重播
  button.classList.remove('animate');
  void button.offsetWidth;
  button.classList.add('animate');
};

两种方案都能解决快速点击时按钮无法正常恢复的问题，其中方案二更简洁，无需维护定时器状态。

内容的提问来源于stack exchange，提问作者legates