Laravel中实现AOS动画延迟值逐次递增50ms的方法

解决方案核心 #

利用Laravel循环自带的$loop变量计算延迟值，同时保证单层遍历数据集合，从根本上避免数据重复渲染。

正确Blade代码示例 #

假设你的数据集合是$dataItems，使用单层@foreach循环，通过$loop->iteration（从1开始计数）生成递增延迟：

@foreach($dataItems as $item)
    <div 
        data-aos="fade-up" 
        data-aos-delay="{{ $loop->iteration * 50 }}"
        data-aos-duration="600"
    >
        <!-- 替换为你的数据展示内容 -->
        <h3>{{ $item->title }}</h3>
        <p>{{ $item->content }}</p>
    </div>
@endforeach

• 第一个元素延迟：1*50 = 50ms
• 第二个元素延迟：2*50 = 100ms
• 后续元素依次递增50ms，完全匹配需求。

数据重复的排查与修复 #

1. 循环嵌套错误：如果之前写了多层@foreach遍历同一个集合，直接删除嵌套循环，仅保留单层遍历即可。
2. 数据源本身重复：若数据集合存在重复项，可在控制器中用集合方法去重：

// 控制器中处理数据
$dataItems = YourModel::query()->get()->unique('id'); // 根据唯一字段去重
return view('your-page', compact('dataItems'));

确保AOS正常运行 #

确认已通过本地资源或包管理工具引入AOS的CSS和JS，然后在页面脚本中初始化：

AOS.init({
    once: true, // 动画仅触发一次
    offset: 100 // 按需调整触发动画的滚动距离
});

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