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

Question

我正在尝试使用 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'
        });

Answer 1

因为 .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 结构)来更新您的帖子，将会有所帮助