0

我创建了一个最小的演示，你可以看到如果用户点击主页上的标题文本并导航到内页，内页没有加载机车的 JS 和 CSS 以及 OWL 轮播。但是如果用户刷新内页，那么机车和猫头鹰旋转木马都可以正常工作。如何解决这个问题？我已将建议的更改添加到 JS 文件（https://bootstrap-awesome.com/barba-test1f/js/main-test.js）

任何帮助将不胜感激。

演示链接：https ://bootstrap-awesome.com/barba-test1f/index-test.html

jQuery.noConflict();
(function($){


 function projdetailpage_leaveAnimation() {
    const tl = gsap.timeline();
    tl.to('.slide_head', 1, {y:'50%', opacity:0, ease: 'Power2.easeOut'});
    
    }

  function projdetailpage_enterAnimation() {
      const tl = gsap.timeline();
        tl.to('.slide_head h1', 1, {y:'-30%', ease: 'power4.out'});
     
    }

    barba.init({

 views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    },
  }],


      transitions: [{
        name: 'projdetailpage transition',
        from: {
          namespace: ['home']
        },
        to: {
          namespace: ['projdetailpage']
        },
        enter() {
          projdetailpage_enterAnimation();
        },
        leave() {
          const done = this.async();
          projdetailpage_leaveAnimation();
          setTimeout(function() {
            done();
          }, 1000);
               
        }
        

      }]
    });

  })(jQuery)
4

0 回答 0