基于FIFO模式实现Anime.js反向动画顺序控制

要让往返动画都保持1→2→3的FIFO顺序，核心是避免alternate模式下自动反转交错延迟的默认行为。你可以将delay从anime.stagger(300)替换为自定义函数，根据元素索引设置固定延迟：

anime({
    targets: '.box span',
    translateX: '90%',
    delay: (el, index) => index * 300, // 每个元素的延迟固定为索引×300ms
    easing: 'linear',
    loop: true,
    direction: 'alternate',
    duration: 1500,
})

原理说明 #

• 默认的anime.stagger()在alternate循环时，会自动反转延迟顺序，导致返回动画从最后一个元素开始。
• 自定义延迟函数(el, index) => index * 300让每个元素的延迟始终基于自身索引，无论动画方向是正向还是反向，都保持第一个元素先触发、第二个随后、第三个最后，完美实现往返均为FIFO顺序。

内容的提问来源于stack exchange，提问作者Mr.Coder