点击按钮时为同一元素重复触发CSS3动画效果的实现方案

你的核心问题是CSS动画默认只会在元素首次渲染完成时执行一次。要实现每次点击按钮都触发动画，我们可以通过JavaScript动态控制动画类的添加/移除，配合强制浏览器重绘来实现，下面是具体的实现方案：

步骤1：重构CSS，将动画封装为独立类 #

把原来直接绑定在#quoteId上的动画抽成单独的类，这样我们能灵活地动态控制动画的开启与关闭：

#quoteId {
  opacity: 1;
}

/* 抽离动画类，方便动态操作 */
.quote-fade-animation {
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 1;}
}

步骤2：调整HTML，给按钮添加标识 #

给按钮加个id，方便JavaScript快速获取元素：

<div id="quoteId" class="quote-fade-animation"> 
  <h1>{{ data }}</h1> 
</div> 
<button id="nextQuoteBtn">Show Next</button>

注意：首次加载时给quoteId加上动画类，保留初始的动画效果

步骤3：编写JavaScript逻辑控制动画触发 #

点击按钮时，我们需要先移除动画类，强制浏览器重绘，再重新添加动画类，这样就能重新触发动画：

const quoteContainer = document.getElementById('quoteId');
const nextBtn = document.getElementById('nextQuoteBtn');

nextBtn.addEventListener('click', () => {
  // 1. 先移除动画类
  quoteContainer.classList.remove('quote-fade-animation');
  
  // 2. 强制浏览器重绘（关键步骤！否则浏览器会合并DOM操作，不触发重新动画）
  void quoteContainer.offsetWidth;
  
  // 3. 这里替换成你更新{{ data }}的逻辑
  // 示例：quoteContainer.querySelector('h1').textContent = 新的引用内容;
  
  // 4. 重新添加动画类，触发动画
  quoteContainer.classList.add('quote-fade-animation');
});

为什么需要强制重绘？ #

浏览器会对DOM操作做批量优化，如果直接移除再添加类，浏览器可能会认为没有样式变化，不会重新计算布局和触发动画。void quoteContainer.offsetWidth会读取元素的布局属性，强制浏览器立即执行重绘，让后续的类添加操作被识别为新的样式变化，从而重新触发动画。

另一种简化方案（利用animationend事件） #

如果你不想手动处理重绘，也可以监听动画结束事件，在动画结束后自动移除类，下次点击按钮时再添加类触发动画：

const quoteContainer = document.getElementById('quoteId');
const nextBtn = document.getElementById('nextQuoteBtn');

// 动画结束后自动移除类
quoteContainer.addEventListener('animationend', () => {
  quoteContainer.classList.remove('quote-fade-animation');
});

nextBtn.addEventListener('click', () => {
  // 先更新数据
  // quoteContainer.querySelector('h1').textContent = 新的引用内容;
  
  // 添加类触发动画
  quoteContainer.classList.add('quote-fade-animation');
});

这种方式更简洁，适合动画时长固定的场景，因为只有在上一次动画完全结束后，点击按钮才会触发新的动画，避免动画叠加。

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