本文讲解如何在 WordPress 中使用 ACF 重复字段（Repeater）动态生成卡片时，为每张卡片的 AOS 动画设置依次增加 100ms 的 data-aos-delay 值，实现错落有致的入场效果。
本文讲解如何在 wordpress 中使用 acf 重复字段（repeater）动态生成卡片时，为每张卡片的 aos 动画设置依次增加 100ms 的 `data-aos-delay` 值，实现错落有致的入场效果。
在实际开发中，当使用 AOS（Animate On Scroll）库为多个卡片添加滚动动画时，若所有卡片使用相同延迟，会导致动画“齐刷刷”同时触发，缺乏层次感。理想的方案是让每张卡片的动画延迟比前一张多 100ms —— 即第 1 张延迟 300ms、第 2 张 400ms、第 3 张 500ms……以此类推。
实现的关键在于：将延迟变量 $delay 的初始化移至循环外部，并在每次迭代中执行 += 100 自增操作。注意初始值需预设为 200，因为首次进入循环即执行 += 100，从而确保第一张卡片获得 300ms 延迟（200 + 100 = 300），后续依次递增。
以下是优化后的完整代码示例：
<ul data-aos="zoom-in" class="cards-list">
<?php if (have_rows('cards')) :
$delay = 200; // 初始值设为 200，首张卡片将显示为 300ms
while (have_rows('cards')) : the_row();
$delay += 100; // 每次循环增加 100ms
?>
<li data-aos-delay="<?php echo esc_attr($delay); ?>">
<img src="<?php echo esc_url(the_sub_field('card_icon', false)); ? alt="如何为 ACF 循环卡片设置逐项递增的动画延迟时间" >" alt="">
<h3><?php the_sub_field('card_title'); ?></h3>
<p><?php the_sub_field('card_text'); ?></p>
</li>
<?php endwhile;
endif; ?>
</ul>✅ 注意事项与最佳实践：
- 使用
esc_attr()对输出到 HTML 属性中的$delay值进行转义，防止 XSS 风险； -
the_sub_field()默认直接输出内容，若需在 PHP 表达式中拼接（如src属性），建议改用get_sub_field()并手动echo，或传入false参数（如示例中the_sub_field('card_icon', false)）以返回而非输出字符串； - 若需更灵活控制（如从 0 开始、或跳过首项），可改用计数器方式：
$index = 0; ... $delay = 300 + ($index++ * 100);； - 确保页面已正确引入 AOS 库并初始化（
AOS.init()），否则data-aos-delay将无效果。
通过这种简洁而可控的递增逻辑，你不仅能精准控制动画节奏，还能轻松扩展为其他步长（如 += 50 或 += 200），为复杂列表动画提供坚实基础。
