如何实现YouTube式音量调节时持续显示音量反馈图标？

你的核心问题是当前代码仅在音量状态（静音/低音量/高音量）切换时才添加动画类，同状态下连续按键不会触发反馈。要实现每次按键都显示反馈，需要每次调用音量调节函数时，强制触发动画类的添加（即使状态未变），具体修改如下：

修改后的JavaScript代码 #

document.addEventListener("keydown", (e) => {
  switch (e.code) {
    case "ArrowUp":
      volume(+0.05);
      break;
    case "ArrowDown":
      volume(-0.05);
      break;
  }
});

function volume(change) {
  // 更新音量值
  video.volume = Math.min(1, Math.max(0, video.volume + change));
  volumeSlider.value = video.volume;

  // 先移除所有元素的动画类，确保动画可以重新触发
  const feedbackElements = [volumeHigh, volumeLow, volumeMuted];
  feedbackElements.forEach(el => el.classList.remove("animate-feedback"));

  // 根据当前音量状态确定要显示的反馈元素
  let targetElement;
  if (video.muted || video.volume === 0) {
    targetElement = volumeMuted;
  } else if (video.volume >= 0.5) {
    targetElement = volumeHigh;
  } else {
    targetElement = volumeLow;
  }

  // 延迟添加动画类，利用DOM重绘触发动画
  setTimeout(() => {
    targetElement.classList.add("animate-feedback");
  }, 10);

  // 动画结束后自动移除类，避免残留（时长根据你的CSS动画实际时长调整）
  setTimeout(() => {
    targetElement.classList.remove("animate-feedback");
  }, 800);
}

关键修改点说明 #

• 统一移除动画类：不管当前音量状态如何，先清空所有反馈元素的动画类，确保后续添加类时能重新触发CSS动画（CSS动画默认仅在类首次添加时执行一次）。
• 延迟添加类触发动画：用10ms的延迟让浏览器完成DOM重绘，确保移除和添加类的操作被识别为两个独立动作，从而触发动画效果。
• 自动清理动画类：设置定时器在动画结束后移除类，避免类长期附着在元素上，影响下次按键的动画触发。

补充CSS建议 #

确保你的animate-feedback类包含完整的淡入淡出动画逻辑，示例：

.animate-feedback {
  opacity: 1;
  visibility: visible;
  animation: volumeFeedback 0.8s ease-out forwards;
}

@keyframes volumeFeedback {
  0% { opacity: 0; transform: scale(0.8); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; visibility: hidden; }
}

/* 默认隐藏反馈元素 */
.volume-feedback {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式（如图标大小、颜色等） */
}

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