javascript - Barba.js 转换在真实服务器上不起作用

Question

我是 barba.js 的新手，而且很好。在本地主机上一切正常，但是当我开始在真实服务器/主机上运行时，页面之间的动画不起作用。我不知道为什么不工作。

这里的页面：

https://globalpsolutions-demo.darkredgm.com/

这是所有页面的页脚：

`

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>

<script id="reloadMe" src="js/rellax.js"></script>

<script>
    menuScreen_open = false;
    menuScreen = document.getElementById("menuScreen");
    menuScreen_bg = document.getElementById("menuScreen_bg");

    links = menuScreen.getElementsByTagName("a");
       
    for (let i = 0; i < links.length; i++) {
            let link = links[i];
            link.addEventListener("click", function(){
                closeMenuScreen();
        })
        }

    menuScreen_bg.addEventListener("click", function(){
            closeMenuScreen();
    })

    function closeMenuScreen(){
        menuScreen.classList.remove("active");
        menuScreen_bg.classList.remove("active");

        setTimeout(function(){menuScreen_bg.style.display = "none";}, 300);
        menuScreen_open = false;
    }

   function openMenuScreen(){
       if(!menuScreen_open){
           menuScreen_bg.style.display = "block";
           menuScreen.classList.add("active");
           setTimeout(function(){menuScreen_bg.classList.add("active")}, 300);
           menuScreen_open = true;
       }else{
           closeMenuScreen();
       }
   }

    criLoading = document.getElementById("cripage_loading");
    web_container  = document.getElementById("transition_container_page");

    window.addEventListener("load", function() {
        criLoading.style.minWidth="0%";        
        criLoading.style.width="0%";

        var rellax = new Rellax('.rellax', {
            speed: -3,
            center: true,
            wrapper: null,
            round: true,
            vertical: true,
            horizontal: false
        });
    })      

    window.addEventListener('scroll', function (e) {
        scrollPosX = window.pageYOffset;

        menu = document.getElementById("criNavbar");

        if(scrollPosX >= 1){
            menu.classList.add("active");
        }else{
            menu.classList.remove("active");
        }
    })

    function closeLoading() {
        criLoading.style.minWidth="0%";        
        criLoading.style.width="0%";

    }

    function openLoading() {
        criLoading.style.minWidth="100%";        
        criLoading.style.width="100%";

        web_container.classList.add("cri-hide");
    }

    barba.hooks.before((data) => {
        openLoading();
    });

    barba.hooks.after((data) => {
        web_container.classList.remove("cri-hide");

        with(document) {
            var newscr = createElement('script');
            newscr.id = 'reloadMe';
            newscr.appendChild(createTextNode(getElementById('reloadMe').innerHTML));
            body.removeChild(getElementById('reloadMe'));
            body.appendChild(newscr);
        }

        // Call scripts
        rellax = new Rellax('.rellax', {
            speed: -3,
            center: true,
            wrapper: null,
            round: true,
            vertical: true,
            horizontal: false
        });

        window.scrollTo(0, 0);

        menu = document.querySelectorAll(".cri-menu_item");

        menu.forEach(function (item) {
            if(item.getAttribute("data-cri-menu-item") == data.next.namespace){
                menu.forEach(function (item){
                    item.classList.remove("active");
                });
                item.classList.add("active");
            }
        })

    });

    barba.init({
        views: [{
            namespace: 'about',
            beforeEnter: function () {
                var cssId = 'myCss';  // you could encode the css path itself to generate id..
                if (!document.getElementById(cssId))
                {
                    var head  = document.getElementsByTagName('head')[0];
                    var link  = document.createElement('link');
                    link.id   = cssId;
                    link.rel  = 'stylesheet';
                    link.type = 'text/css';
                    link.href = 'http://localhost:8848/websites/works/GlobalPSolutions/css/about-us.css';
                    link.media = 'all';
                    head.appendChild(link);
                }
                
            },
        },
        {
            namespace: 'home',
            beforeEnter: function () {
                var cssId = 'mainClass';  // you could encode the css path itself to generate id..
                if (!document.getElementById(cssId))
                {
                    var head  = document.getElementsByTagName('head')[0];
                    var link  = document.createElement('link');
                    link.id   = cssId;
                    link.rel  = 'stylesheet';
                    link.type = 'text/css';
                    link.href = 'http://localhost:8848/websites/works/GlobalPSolutions/css/home.css';
                    link.media = 'all';
                    head.appendChild(link);
                }
            }
        }
        ],
        transitions: [{
            sync: true,

            async beforeLeave(data) {

                // const done = this.async();
                // openLoading();
                // await setTimeout(done(), 1300);
            },

            async leave(data) {
            },

            async enter(data) {
                setTimeout(closeLoading, 1300);
            }
        }]
    })
</script>

`

它应该让 div 向左滑动，然后向右滑动，但只需单击并重新启动页面，而不是它应该如何在本地工作。

我正在尝试移动一些元素，更改一些内容，但无法正常工作，而且我不知道如何修复它，或者我必须在主机上修改某些内容才能正常工作。谢谢。