如何在用户切换幻灯片时触发Animate.style的CSS动画？

核心思路 #

• 初始状态下不给任何幻灯片添加动画类，仅在切换完成后为当前激活的幻灯片添加动画类
• 监听幻灯片切换操作（按钮点击/自动切换等），在切换的过渡效果完成后触发动画
• 每次切换前移除上一张幻灯片的动画类，避免重复触发或残留动画

具体实现代码 #

HTML结构示例 #

<div class="slides-container">
  <div class="slide active">
    <h1 class="animate-target">幻灯片1标题</h1>
    <p class="animate-target">幻灯片1内容</p>
  </div>
  <div class="slide">
    <h1 class="animate-target">幻灯片2标题</h1>
    <p class="animate-target">幻灯片2内容</p>
  </div>
  <div class="slide">
    <h1 class="animate-target">幻灯片3标题</h1>
    <p class="animate-target">幻灯片3内容</p>
  </div>
</div>
<button class="prev-btn">上一张</button>
<button class="next-btn">下一张</button>

CSS基础样式 #

.slides-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slide.active {
  opacity: 1;
  z-index: 1;
}

JavaScript逻辑 #

// 获取页面元素
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentSlideIndex = 0;

// 触发当前幻灯片动画的函数
function triggerSlideAnimation() {
  const currentSlide = slides[currentSlideIndex];
  const animateTargets = currentSlide.querySelectorAll('.animate-target');
  
  animateTargets.forEach(target => {
    // 清除之前的动画类，避免重复触发
    target.classList.remove('animate__animated', 'animate__fadeInUp');
    // 强制浏览器重绘，解决动画类重复添加不生效的问题
    void target.offsetWidth;
    // 添加动画类
    target.classList.add('animate__animated', 'animate__fadeInUp');
  });
}

// 幻灯片切换通用函数
function switchSlide(newIndex) {
  // 移除当前幻灯片的激活状态
  slides[currentSlideIndex].classList.remove('active');
  // 更新当前索引
  currentSlideIndex = newIndex;
  // 给新幻灯片添加激活状态
  slides[currentSlideIndex].classList.add('active');
  
  // 等待CSS过渡完成后触发动画（延迟时间需和CSS过渡时间一致）
  setTimeout(triggerSlideAnimation, 500);
}

// 绑定上一张按钮事件
prevBtn.addEventListener('click', () => {
  const newIndex = currentSlideIndex === 0 ? slides.length - 1 : currentSlideIndex - 1;
  switchSlide(newIndex);
});

// 绑定下一张按钮事件
nextBtn.addEventListener('click', () => {
  const newIndex = currentSlideIndex === slides.length - 1 ? 0 : currentSlideIndex + 1;
  switchSlide(newIndex);
});

// 初始加载时触发第一张幻灯片的动画
triggerSlideAnimation();

关键细节说明 #

• void target.offsetWidth用于强制浏览器重绘，解决连续切换时动画类添加不生效的问题
• setTimeout的延迟时间必须和CSS中幻灯片过渡的transition时间保持一致，确保动画在幻灯片完全显示后开始
• 所有需要动画的元素统一标记animate-target类，方便批量处理
• 每次切换前清除上一张幻灯片的动画类，避免残留动画干扰新幻灯片的展示

内容的提问来源于stack exchange，提问作者xada.dev