多个相同项目的 animejs 时间轴 class

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)

这应该行得通，但如果行不通，如果您可以更新您的 post 并提供更多上下文，例如 HTML 结构

，将会有所帮助

多个相同项目的 animejs 时间轴 class

animejs timeline for multiple items of the same class

javascript

animation

anime.js