Временная шкала animejs для нескольких предметов одного класса

Question

Я пытаюсь использовать временную шкалу animejs (относительную) для отображения одного элемента после завершения другого. Я следовал тому, что они показали в качестве примера - http://animejs.com/documentation/, но, конечно, это можно было бы сделать намного чище?

Я пытался понять, как это сделать, используя 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