0

我有以下站点 - https://pinelake.org - 我挂接到 barba.js 实例以触发 GSAP 页面“擦除”转换。我对 Barba 比较陌生，我遇到了一个问题，如果页面加载时间足够长，则转换按预期工作，但如果页面加载得更快（例如当它被浏览器缓存时）它只是决定完全跳过动画。下面是我的 barba 初始化函数 -

barba.init({
    timeout: 50000,
    cacheIgnore: true,
    transitions: [{
      name: 'main', 
      leave(data){
        gsap.timeline()
        .to('.masthead__nav > *', {
          opacity: 0,
          duration: 0.3,
        })
  
        .to(
          '.wrapper__transition',
          {
            x: 0,
            duration: 0.3,
          },
          '-=0.2'
        )
  
        .set('#header, #content, #footer', {
          opacity: 0,
        })
  
        .set('#nav-overlay', {
          x: '100%',
        })
  
        .set('.wrapper__dimmer', {
          autoAlpha: 0,
          opacity: 0,
        })
  
        .to(
          '.wrapper__transition',
          {
            x: '-100%',
            duration: 0.5,
            ease: 'expo.out',
          },
          '+=0.4'
        );
      },
      beforeEnter: ({ next }) => {
        window.scrollTo(0, 0);
      }, 
      enter(data){
        gsap.timeline()
      .set('body', {
        overflow: 'inherit',
      })

      .to('#header, #content, #footer', {
        opacity: 1,
        duration: 0.5,
      })

      .set('.wrapper__transition', {
        x: '100%',
      })

      .set('#nav-overlay', {
        x: '100%',
      });
      },
      after(){
      initSplit();
      initHeroReveal();
      initActions();
      initVue();

      initSliders();
      initResponsiveEmbeds();
      initGoogleMaps();

      onYouTubeIframeAPIReady();

      initScroller();
      ScrollTrigger.refresh();

      if ($(window).width() < 1200) {
      } else {
        initFocusAlt();
      }
      }
    }]
  })

有人对我能做些什么来解决这个问题有一些见解吗？谢谢！

4

0 回答 0