0

我在 wordpress 中遇到了 barba.js 的常见问题。我正在解决这个问题：https ://codepen.io/dan-oc/pen/gvLaGB和这个https://barbajs.org/demo/nextprev/index.html例子。问题是，页面转换后页面设计被破坏，甚至前一页也被破坏。我知道在 stackoverflow 和其他论坛中有很多关于这个问题的主题，并且有一些答案。我试图从中受益，结果总是一样的。我不知道有什么问题。首先我认为，可能是页脚和头部中的脚本和样式文件在转换后尚未加载，但我看到页面转换后已加载。那么如果在转换后加载所有内容，那么问题是什么。谁能帮帮我。我的 javascript 知识很薄弱，而且我是 ajax 技术的新手。感谢您的关注。

document.addEventListener('DOMContentLoaded', function() {
var lastElementClicked;
    Barba.Pjax.init();
    Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
    lastElementClicked = el;
  });
  
   var Body = Barba.BaseView.extend({
        namespace: '#barba-wrapper',
      sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Body.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: 1500});

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

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

    Barba.Pjax.start();

}, false);
4

0 回答 0