Старый контейнер все еще появляется на несколько секунд // Barba.js v1 - PullRequest
Новая
       20

Старый контейнер все еще появляется на несколько секунд // Barba.js v1

0 голосов
/ 24 сентября 2019

Я не уверен, что сделал не так, но oldContainer все еще появляется через несколько секунд после появления newContainer.

Вот мой код:

Barba.Pjax.start ();Barba.Prefetch.init ()

var transitionAnimation = Barba.BaseTransition.extend ({start: function () {

Promise
        .all([this.newContainerLoading, this.startTransition()])
        .then(this.fadeIn.bind(this));
},

startTransition: function() {

    var transitionPromise = new Promise(function(resolve) {
        var outTransition = new TimelineMax();


        outTransition

            .to("h1", 1, {
                y: 50,
                autoAlpha: 0,
                ease: Power2.easeOut
            })
            .staggerFromTo("ul li a", 0.7, {
                top: "0",
            }, {
                top: "52",
                autoAlpha: 0,
                ease: Expo.easeOut
            }, 0.1, "-=0.9")


            .to("h6", 1, {
                y: 50,
                autoAlpha: 0,
                ease: Power2.easeOut
            }, "-=0.9")

            .set(".color-wipe", {
                display: 'block',
                y: "100%"
            }, "-=0.7")
            .staggerFromTo(".color-wipe", 1, {
                y: "100%"
            }, {
                y: "-100%",
                ease: Expo.easeOut
            }, 0.2, "-=0.2")

            .to(".loader", 1, {

        autoAlpha: 1,
                onComplete: function() {
                    resolve();
                }
            }, )



            .staggerFromTo(".color-wipe", 1, {
                y: "-100%"
            }, {
                y: "100%",
                ease: Expo.easeIn
            }, 0.2, "-=0.5")
            .set(".color-wipe", {
                display: 'none'
            })


    });


    return transitionPromise;
},

fadeIn: function() {

    $(window).scrollTop(0);

    var _this = this;
    var $el = $(this.newContainer);

    TweenMax.set($(this.oldContainer), {
        visibility: "hidden",
        opacity: 0,
    });
    TweenMax.set($el, {
        visibility: "visible",
        opacity: 0,
    });


    TweenMax.to(".loader", 1, {
        y: -50,
        autoAlpha: 0,
        ease: Expo.easeOut
    });


    TweenMax.fromTo("h1", 1.5, {
        y: 50,
        autoAlpha: 0
    }, {
        delay: 0.8,
        y: 0,
        autoAlpha: 1,
        ease: Expo.easeOut
    });

    TweenMax.to($el, 0.1, {
        opacity: 1,
        onComplete: function() {
            _this.done();
            console.log("done");
        }
    });
    Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
        eval(container.querySelector("script").innerHTML);
    });
}

});

Barba.Dispatcher.on ('newPageReady', функция (currentStatus, oldStatus, barbaContainer, newPageRawHTML) {

if (Barba.HistoryManager.history.length === 1) { // ignore when it's first view
    return;
}

var $body = $('body');

$body.removeClass();

[1]);

});

Barba.Pjax.getTransition = function () {/ ** * Здесь вы можете использовать свою собственную логику!* Например, вы можете использовать различные переходы, основанные на текущей странице или ссылке ... * / 

return transitionAnimation;

};

...