求助：实现左侧心形切换、右侧加载的Animated Progress Button

根据你提供的动图需求，你的代码存在几个关键问题：进度条覆盖整个按钮、动画方向错误、未处理重复点击。以下是修正后的完整实现：

修正后的 HTML #

<button id="heartButton">
  <div class="left-section">
    <img src="love.png" alt="Heart Icon" id="heartIcon">
    <img src="heartbroken.png" alt="Broken Heart Icon" id="brokenHeartIcon">
  </div>
  <div class="right-section">
    <div class="progress-bar"></div>
  </div>
</button>

修正后的 CSS #

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

button {
  display: flex;
  align-items: center;
  background-color: #3498db;
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  gap: 10px; /* 替代margin-right，布局更灵活 */
}

.left-section {
  display: flex;
  align-items: center;
}

#heartIcon,
#brokenHeartIcon {
  width: 30px;
  height: 30px;
}

#brokenHeartIcon {
  display: none;
}

.right-section {
  position: relative; /* 让进度条相对于此容器定位 */
  width: 80px;
  height: 30px;
  background-color: #000;
  overflow: hidden; /* 裁剪超出容器的进度条 */
}

.progress-bar {
  position: absolute;
  top: 0;
  right: 0; /* 从右侧开始动画 */
  bottom: 0;
  width: 0;
  background-color: #e74c3c;
  transition: width 1s linear;
}

修正后的 JavaScript #

let isAnimating = false; // 防止重复点击触发动画

document.getElementById('heartButton').addEventListener('click', function() {
  if (isAnimating) return;
  
  isAnimating = true;
  const heartIcon = document.getElementById('heartIcon');
  const brokenHeartIcon = document.getElementById('brokenHeartIcon');
  const progressBar = document.querySelector('.progress-bar');

  // 切换为破碎心形图标
  heartIcon.style.display = 'none';
  brokenHeartIcon.style.display = 'block';

  // 启动进度条从右到左填充的动画
  progressBar.style.width = '100%';

  // 等待填充动画完成后开始重置
  setTimeout(function() {
    progressBar.style.width = '0';
    
    // 等待重置动画完成后恢复初始状态
    setTimeout(() => {
      heartIcon.style.display = 'block';
      brokenHeartIcon.style.display = 'none';
      isAnimating = false;
    }, 1000);
  }, 1000);
});

关键修改说明 #

1. 进度条容器定位：为.right-section添加position: relative，让进度条仅在右侧区域内动画，不再覆盖整个按钮。
2. 动画方向调整：将.progress-bar的left: 0改为right: 0，实现从右到左的填充效果，完全匹配动图需求。
3. 重复点击防护：添加isAnimating标志，避免动画过程中重复点击导致的状态混乱。
4. 状态同步：等待重置动画完成后再切换回原始图标，保证视觉流程连贯自然。

内容的提问来源于stack exchange，提问作者محمد زین عباس