如何实现AOS fade-up动画仅触发一次且仅显示向上淡入效果？

核心问题分析 #

你遇到的问题源于AOS默认会根据滚动方向自动反转动画逻辑：向下滚动触发fade-up，向上滚动触发fade-down。但你需要固定的fade-up效果，且仅触发一次。

具体修复方案 #

1. 修正属性语法错误 #

你的代码中data-aos-once=“true”使用了中文引号，导致AOS无法识别该属性，必须替换为英文双引号：

<div class="mx-4" data-aos="fade-up" data-aos-duration="1500" data-aos-once="true"></div>

data-aos-once="true"的作用是让动画仅触发一次，滚动回顶部时不会重新触发反向动画。

2. 强制锁定动画方向（若上述步骤无效） #

如果修正引号后仍存在反向动画问题，需在AOS初始化代码中添加配置，禁用滚动方向检测，强制使用向上动画：

AOS.init({
  direction: 'up', // 固定动画方向为向上
  once: true // 确保动画只执行一次
});

配置后，无论页面向上还是向下滚动，元素只会触发fade-up动画，且仅执行一次。

3. 调整动画触发时机（可选） #

若需要自定义动画触发的位置，可通过data-aos-offset属性调整元素距离视口底部的触发阈值，例如：

<div class="mx-4" data-aos="fade-up" data-aos-duration="1500" data-aos-once="true" data-aos-offset="200"></div>

data-aos-offset="200"表示当元素距离视口底部200px时触发动画。

关键原理说明 #

AOS默认direction参数为'auto'，会根据滚动方向自动反转动画方向。设置direction: 'up'后，所有动画将固定为向上方向，结合once: true即可实现元素仅呈现一次fade-up向上淡入的效果。

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