AOS.js在Swiper.js滑动切换时不触发动画的问题排查

我用Swiper.js实现区块滑动切换，同时搭配AOS.js做滚动动画效果。想要每次滑动切换时，当前显示的区块内文本触发AOS动画，但现在只有第一个区块在页面加载时触发一次动画，切换滑动后完全没反应。已经试过这些方法都没用：

• 切换时移除AOS类再调用AOS.init()
• 切换时调用AOS.refresh()
• 手动移除并重新添加AOS类
• 手动给HTML加AOS属性

AOS默认靠监听页面滚动触发动画，但Swiper的滑动不属于滚动行为，得手动控制AOS的状态和动画触发——核心是在Swiper切换完成后，重置所有区块的AOS状态，再单独触发当前活跃区块的动画。

下面是修正后的代码：

var swiper = new Swiper('.swiper', {
  // 这里放你的Swiper基础配置，比如 slidesPerView: 1, loop: false 之类的
  on: {
    init: function() {
      // 初始化时处理第一个活跃区块的动画
      const activeWrapper = this.slides[this.activeIndex].querySelector('.wrapper');
      if (activeWrapper) {
        // 强制重置AOS的所有元素状态
        AOS.refreshHard();
        // 触发动画
        AOS.refresh();
      }
    },
    slideChangeTransitionEnd: function() {
      // 先清空所有区块的AOS状态，避免冲突
      document.querySelectorAll('.swiper-slide .wrapper').forEach(el => {
        el.classList.remove('aos-init', 'aos-animate');
        el.removeAttribute('data-aos-id');
      });

      // 处理当前活跃区块的动画
      const activeWrapper = this.slides[this.activeIndex].querySelector('.wrapper');
      if (activeWrapper) {
        // 强制刷新AOS的元素跟踪数据
        AOS.refreshHard();
        // 加个小延迟确保DOM状态稳定，再触发动画
        setTimeout(() => {
          AOS.refresh();
        }, 100);
      }
    }
  }
});

注意点 #

• 你的.wrapper元素必须已经正确设置了data-aos属性（比如data-aos="fade-right"），不然AOS不知道要执行什么动画
• 如果你用的是AOS v2.x版本，把AOS.refreshHard()换成AOS.refresh(true)，因为v2里没有refreshHard这个方法
• 别反复调用AOS.init()，多次初始化会让AOS内部状态乱掉，用refresh和refreshHard就够了

内容的提问来源于stack exchange，提问作者Katarina Perović