如何使用 Barba.js 从单个页面进行多个页面转换

如何解决如何使用 Barba.js 从单个页面进行多个页面转换

最近，我遇到了 Barba.JS 库，想知道如何使用它从单个页面添加多个页面转换？正如您从 Codepen 演示中看到的，如果我单击导航链接或图像，就会发生白色过渡的方块。如果用户单击导航链接，可能会发生相同的页面转换，但是当用户单击图像时，如何添加不同的页面转换？有什么帮助吗？

function PageTransition() {
    var tl = gsap.timeline();

    tl.to('ul.transition li',{ duration: .5,scaleY: 1,transformOrigin: "bottom left",stagger: .2})

    tl.to('ul.transition li',scaleY: 0,stagger: .1,delay: .1})

}

function contentAnimation() {

    var tl = gsap.timeline();
    //tl.from('.left',{duration: 1.5,translateY:50,opacity:0})
    //tl.to('transition',{clipPath:"polygon(0 0,100% 100%,0% 100%)"})
}


function delay(n) {
    n = n || 2500;
    return new Promise(done => {
        setTimeout(() => {
            done();
        },n);
        });
}

barba.init ({
    sync: true,transitions: [{

            async leave(data) {

                const done = this.async();

                PageTransition();
                await Delay(2500);
                done();
            },async enter(data) {
                contentAnimation();
            },async once(data) {
                contentAnimation();
            }




    }]
})

演示： https://codepen.io/bootstrap007/pen/zYwrOXR