0

some how my page design is distroyed after Jquery pjax transition. i use barba.js . onload everything i ok. but after transition page design is distroyed. in simple html website my transition work without any problem.. but in wordpress it doesnt. i dont know what is the problem with my code : this is my website: http://schreibbescwer.de/elite

document.addEventListener('DOMContentLoaded', function() {

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

    var Homepage = Barba.BaseView.extend({
        namespace: 'homep',
      sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Homepage.init();

    var About = Barba.BaseView.extend({
        namespace: 'aboutp',
      sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    About.init();
    
    var Newspress = Barba.BaseView.extend({
        namespace: 'newsp',
      sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Newspress.init();
    
    var Tedbirler = Barba.BaseView.extend({
        namespace: 'tedbirlerp',
      sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Tedbirler.init();

    var pageTransition = Barba.BaseTransition.extend({
        start: function() {
            this.newContainerLoading.then(
                val => this.fadeInNewcontent(this.newContainer, this.oldContainer)
            );
        },
        transitionFinished(newContainer, oldContainer) {
            newContainer.style.visibility = "visible";
            window.scrollTo(0, 0);
            this.done();
        },
        fadeInNewcontent: function(newContainer, oldContainer) {
            newContainer.classList.add('new');

            var _this = this;

            const transition = this.oldContainer.animate([
                { opacity: 1 }, 
                { opacity: 0 }
            ], {duration: 1000});

            transition.onfinish = function() {
                _this.transitionFinished(newContainer, oldContainer);
            };
        }
    });

    Barba.Pjax.getTransition = function() {
        return pageTransition;
    }

    Barba.Pjax.start();

}, false);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.