javascript - 相同类的多个项目的animejs时间轴

我正在尝试使用animejs时间轴（相对）在另一项完成后显示一项。我已经按照他们显示的示例进行了操作-http://animejs.com/documentation/#relativeOffset，但是可以肯定地用一种更加简洁的方式来完成此操作吗？

我试图弄清楚如何使用foreach进行操作，但似乎无法正常工作。这就是我所拥有的，可以正常工作，但是很杂乱，而且很长，并且不允许有超过5个项目（就此而言，则更少）。

var relativeOffset = anime.timeline();
        relativeOffset.add({
            targets:'ul > li:nth-child(1)',
            easing:'easeInOutSine',
            translateY:-25,
            duration:300,
            delay:1800,
            opacity:{
                value:[0,1],
                easing:'linear'
            }
        }).add({
            targets:'ul > li:nth-child(2)',
            easing:'easeInOutSine',
            translateY:-25,
            duration:300,
            opacity:{
                value:[0,1],
                easing:'linear'
            },
            offset:'+=50'
        }).add({
            targets:'ul > li:nth-child(3)',
            easing:'easeInOutSine',
            translateY:-25,
            duration:300,
            opacity:{
                value:[0,1],
                easing:'linear'
            },
            offset:'+=50'
        }).add({
            targets:'ul > li:nth-child(4)',
            easing:'easeInOutSine',
            translateY:-25,
            duration:300,
            opacity:{
                value:[0,1],
                easing:'linear'
            },
            offset:'+=50'
        }).add({
            targets:'ul > li:nth-child(5)',
            easing:'easeInOutSine',
            translateY:-25,
            duration:300,
            opacity:{
                value:[0,1],
                easing:'linear'
            },
            offset:'+=50'
        });

最佳答案

因为.add是可链接的，所以您可以使用一点递归魔术来获得所需的内容，同时仍要增加nth-child选择器（我相信这是唯一一个从一个过渡更改为另一个过渡的属性-如果出错，请更正我）

const initRelativeOffset = anime.timeline();

const addTransition = (relativeOffset, i = 1) => {
    if(i <= 5) { // keep adding the transition until i passes 5 (you could always change this number if you want to add more <li>s
        addTransition(
            relativeOffset.add({
                targets: `ul > li:nth-child(${i})`,
                easing:'easeInOutSine',
                translateY:-25,
                duration:300,
                delay:1800,
                opacity:{
                    value:[0,1],
                    easing:'linear'
                }
            }),
            i + 1
        )
    }
}

addTransition(initRelativeOffset)

这应该可以，但是如果不能，那么可以在更多上下文（例如HTML结构）中更新您的帖子，这会有所帮助