如何在不破坏任何功能的情况下使用 barba.js 运行其他 JS 文件

Question

I am using barba.js for page transitions but when I use it my other js-files break.

Here is my Website

I created a runScript function which I implemented on all other JS-files but it's still not working.

what am I doing wrong and how can I fix it?

Here is the runscript function on one of the JS-files:

 const runScript = () => { const footer = document.querySelector('footer'); barba.hooks.leave((data) => { footer.style.opacity = 0; }); barba.hooks.afterEnter((data) => { footer.style.opacity = 1; }); } runScript() barba.init({ transitions: [ { name: "switch", leave({ current, next, trigger }) { }, enter({ current, next, trigger }) { runScript() runScriptc() return new Promise(resolve => { setTimeout(resolve, 2000) }) } } ], views: [], debug: true })

Answer 1

I'm assuming you're using BarbaJs v2. In that case you don't need to declare that footer behavior in every js file. You are not assigning transition from-to properties, also, you are missing some brackets and semicolon. You just need one js file (or typescript transpiled file) to get that working. Try using this:

const runScript = () => {
  const footer = document.querySelector('footer');

  barba.hooks.beforeLeave((data) => {
      footer.style.opacity = 0;
  });

  barba.hooks.afterEnter((data) => {
      footer.style.opacity = 1;
  });

}


runScript();

barba.init({
    transitions: [{

            name: "switch",

            from: { namespace : [ 'homepage' ] }, //set the "from" namespaces.

            to: { namespace : [ 'about', 'contact' ] }, //set the "to" namespaces.

            beforeLeave({ current, next, trigger }) { //before leaving the page.
                 //Begin your transition and return "resolve" when is completed.
                 return new Promise(resolve => {
                    setTimeout(resolve, 2000);
                 })
            },
            afterEnter({ current, next, trigger }) {
                 //remove the transition (is not necessary to return a promise, at this point barba doesn't check for promises).

            }
        }],
    views: [],
    debug: true
});

Barba.hooks properties allows you to declare a behaviour every time a section enters, or leave .

Remember always set barba-barba="wrapper" , data-barba="container" and data-barba-namespace="homepage" (or about or contact) tags at the HTML pages you'll use. Eg:

<div class="main-wrapper" data-barba="wrapper"> 

    <!-- Content that will not change -->

    <section data-barba="container" data-barba-namespace="homepage"> 

        <!-- Content that will change --> 

    </section>
 </div>

You can check BarbaJs v2 documentation for more information about transitions.