0

最近，我遇到了 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', { duration: .5, scaleY: 0, transformOrigin: "bottom left", 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

4

0 回答 0