AOS CSS滚动动画加载即触发而非滚动触发的修复咨询

可能原因及对应解决方案 #

1. 元素初始已在视口内，AOS直接判定触发条件满足 #

如果页面加载时目标区块（第二部分）已处于视口范围内，AOS会立即触发动画。可通过调整AOS配置延迟触发时机：

修改初始化代码，改用资源加载完成事件并添加偏移配置：

jQuery(window).on('load', function() {
  AOS.init({
    offset: 250, // 元素进入视口250px后才触发动画，可根据页面高度调整
    once: true, // 动画仅触发一次
    mirror: false // 滚动回顶部时不重复触发
  });
  AOS.refresh(); // 确保资源加载完成后重新计算元素位置
});

改用window.load而非document.ready，避免因图片等资源未加载导致元素高度计算错误，进而误判视口范围。

2. AOS默认初始样式被覆盖 #

AOS依赖元素初始的opacity: 0和过渡属性实现动画效果，若自定义CSS覆盖了这些样式，元素会直接显示，看起来像动画加载时就执行。可补充基础样式确保生效：

.aos-init {
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: ease;
}
.aos-animate {
  opacity: 1;
}

3. 单独设置元素触发阈值 #

若全局配置无效，可给目标元素添加单独的偏移属性，精准控制触发时机：

<div class="counter-section--content-item" 
     data-aos="flip-left" 
     data-aos-delay="<?= $delay; ?>" 
     data-aos-duration="1500"
     data-aos-offset="300"> <!-- 单独设置该元素的触发偏移量 -->
  <!-- 元素内容 -->
</div>

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