如何在WordPress的ACF循环中实现AOS.js延迟时间逐元素递增

嘿，这个需求其实超简单，不用写复杂的函数，咱们直接在ACF的循环里加个计数器就能搞定！不用改CSS结构，完全适配你现有的代码。

具体实现思路： #

• 在循环外部初始化一个延迟变量，从你想要的初始值（比如200ms）开始
• 每次循环里把data-aos-delay的值绑定到这个变量
• 循环结束前，给变量加上你需要的递增值（这里是200ms）

修改后的完整代码： #

<?php 
// 初始化延迟变量，起始值设为200ms
$aos_delay = 200;
while ( have_rows('panneau') ) : the_row(); ?>
<div class="col" data-aos="fade-right" data-aos-delay="<?= $aos_delay; ?>">
<?php $image = get_sub_field('image'); if( !empty($image) ): ?>
<img src="<?= $image['url']; ?>" alt="<?= $image['alt']; ?>" />
<?php endif; ?>
</div>
<?php 
// 每次循环后延迟增加200ms
$aos_delay += 200;
endwhile; ?>

效果说明： #

• 第一次循环时，元素的data-aos-delay是200ms，循环结束后变量自动变成400ms
• 第二次循环就会用400ms的延迟，结束后更新为600ms，以此类推
• 这样每张图片的动画延迟就会自动比上一张多200ms，完全符合你的需求

如果之后想调整初始延迟或者递增值，直接修改$aos_delay的初始值或者+=后面的数字就行，非常灵活。

内容的提问来源于stack exchange，提问作者Simon Gauthier Boudreau