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结构

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

1 个答案: