Astro组件中AOS滚动动画仅触发一次，进入视口不重触发

问题描述 #

在Astro组件中使用AOS（滚动触发动画）时，元素首次进入视口时动画正常触发，但再次滚动回到该元素所在区域时，动画无法重新触发。

解决方案 #

1. 修改AOS初始化核心配置 #

AOS默认配置里的once参数为true，这是导致动画仅触发一次的根本原因。将该参数改为false，即可让动画在元素每次进入视口时重新触发：

<script>
  import AOS from 'aos';

  AOS.init({
    once: false // 关键配置：允许动画重复触发
  });
</script>

2. 客户端路由场景补充处理（可选） #

如果你的Astro项目使用了客户端路由集成（如React/Preact等框架集成），路由切换后可能需要手动刷新AOS状态，避免动画失效。可以添加路由加载监听逻辑：

<script>
  import AOS from 'aos';
  import { onMount } from 'astro:client';

  onMount(() => {
    AOS.init({
      once: false
    });

    // 监听页面加载完成事件，刷新AOS状态
    window.addEventListener('astro:page-load', () => {
      AOS.refresh();
    });
  });
</script>

3. 确认CSS状态（已配置可跳过） #

确保AOS的CSS文件已正确引入，当once: false生效时，元素离开视口后会自动移除aos-animate类并恢复aos-init类，为下一次进入视口的动画触发做准备。

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