单页网站中AOS Animation单次触发功能实现问询

当然可以！AOS本身就提供了非常简单的配置来实现这个需求，同时也支持自定义逻辑来满足更复杂的场景，下面是两种常用的方法：

1. 使用官方内置的once配置项（推荐） #

这是最直接的方案，AOS的初始化配置里有一个once参数，设置为true后，所有元素的动画只会在首次进入视口时触发一次，后续滚动不会重复播放。

全局配置（所有元素生效） #

在初始化AOS的时候添加这个参数：

AOS.init({
  once: true, // 核心配置：动画仅触发一次
  // 其他你的配置项，比如duration、delay等
  duration: 1000,
  easing: 'ease-in-out'
});

单个元素单独配置 #

如果你只想让特定元素生效，不需要全局设置，可以直接在元素的data属性里指定：

<div data-aos="fade-up" data-aos-once="true">
  这个元素的动画只会播放一次
</div>

2. 监听AOS事件自定义控制（适合复杂场景） #

如果需要在动画触发后执行额外逻辑，或者针对旧版本AOS（某些极旧版本可能没有once参数），可以通过监听AOS的事件来手动禁用元素的动画触发：

// 监听元素动画开始的事件
document.addEventListener('aos:in', function(e) {
  const targetElement = e.detail;
  // 移除该元素的所有AOS相关属性，防止再次触发
  targetElement.removeAttribute('data-aos');
  targetElement.removeAttribute('data-aos-delay');
  targetElement.removeAttribute('data-aos-duration');
  // 刷新AOS的状态，让配置生效
  AOS.refreshHard();
}, false);

这个方法的好处是可以在动画触发后灵活添加其他操作，比如给元素添加一个“已动画”的类，方便后续样式控制。

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