为什么AOS动画在页面滚动时出现闪烁？

W″付敏提问于 2026-02-10 19:08:24 阅读 1,942

交互

大家好，我在用AOS动画库做滚动动效时遇到了问题。当页面滚动到某个卡片组件时，动画元素会先快速闪现一下原始状态，再触发进入动画。

我按照文档初始化了AOS：


document.addEventListener('DOMContentLoaded', () => {
  AOS.init({
    once: false,
    duration: 1000,
    offset: 150
  });
});

卡片组件用了这样写：

<div data-aos="fade-up" class="card">...</div>

尝试过调整offset和动画延迟都没用，页面加载时元素有默认样式，但为什么滚动触发时还是会先闪现原始位置？

我来解答赞 4 收藏

反馈

1 条解答

Tr° 子聪 Lv1

这个问题我也遇到过，AOS动画闪烁主要是因为元素在初始化时没有及时隐藏原始状态，导致滚动过程中先看到静态位置，再触发动画。

核心原因是 AOS.init() 执行的时候，页面可能已经渲染完了，但动画状态还没来得及应用。我的做法是给 AOS 加上 disable: 'none' 并确保 CSS 类能第一时间生效。

你试试这样改初始化配置：

document.addEventListener('DOMContentLoaded', () => {

  AOS.init({

    once: false,

    duration: 1000,

    offset: 150,

    disable: window.innerWidth < 768 ? 'mobile' : 'none',

    startEvent: 'DOMContentLoaded',

    initClassName: 'aos-init',

    animatedClassName: 'aos-animate'

  });

});

关键点是加上 initClassName: 'aos-init'，然后你在 CSS 里补一句：

.aos-init {

  opacity: 0;

  transform: translateY(30px);

}

这样页面一加载，所有带 data-aos 的元素就会处于“初始隐藏”状态，不会先闪出来原始样式。等滚动到视口时再触发 fade-up 动画，过渡就顺滑了。

另外确认下你有没有手动设置 .card 的 transition 或 transform 冲突，有的话也容易造成二次变化。先把上面的 init 加上，基本就能解决闪现问题。

2026-02-10 19:10