Question

我正在使用一个名为dlmenu的jQuery插件来创建多级菜单，并使用barba.js在页面之间创建平滑的过渡，当我添加barba时，我的js可以在没有barba的情况下正常工作，菜单插件在这里不起作用，这是我的代码：

脚本标签顺序

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
<script src="/assets/scripts/vendor/jquery.dlmenu.js"></script>
<script src="/assets/scripts/vendor/barba.min.js"></script>
<script src="/assets/scripts/app.js"></script>

并且在头顶有一个脚本，如下所示：

<head>
 <script src="/assets/scripts/vendor/modernizr.custom.js"></script>
</head>

这是我的js：

// Menu
$(function() {
      $( '#dl-menu' ).dlmenu({
            animationClasses : { classin : 'dl-animate-in-4', classout : 'dl-animate-out-4' }
      });
});




// Barba js ( To create fluid and smooth transitions between pages. )
var FadeTransition = Barba.BaseTransition.extend({
      start: function() {
      /**
       * This function is automatically called as soon the Transition starts
       * this.newContainerLoading is a Promise for the loading of the new container
       * (Barba.js also comes with an handy Promise polyfill!)
       */

      // As soon the loading is finished and the old page is faded out, let's fade the new page
      Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
      },

      fadeOut: function() {
      /**
       * this.oldContainer is the HTMLElement of the old Container
       */

      return $(this.oldContainer).animate({ opacity: 0 }).promise();
      },

      fadeIn: function() {
      /**
       * this.newContainer is the HTMLElement of the new Container
       * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
       * Please note, newContainer is available just after newContainerLoading is resolved!
       */
      $(window).scrollTop(0);
      var _this = this;
      var $el = $(this.newContainer);

      $(this.oldContainer).hide();

      $el.css({
      visibility : 'visible',
      opacity : 0
      });
      if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
      }
      $el.animate({ opacity: 1 }, 400, function() {
      /**
       * Do not forget to call .done() as soon your transition is finished!
       * .done() will automatically remove from the DOM the old Container
       */

      _this.done();
      });
      }
});

/**
 * Next step, you have to tell Barba to use the new Transition
 */

Barba.Pjax.getTransition = function() {

      var tl = new TimelineMax();
      tl.to(".screen-wipe-top", 0.5, {y: "50%", repeat: 1, yoyo: true})
      tl.to(".screen-wipe-bottom", 0.5, {y: "-50%", repeat: 1, yoyo: true}, "-=1")


      /**
       * Here you can use your own logic!
       * For example you can use different Transition based on the current page or link...
       */

      return FadeTransition;
};

Barba.Pjax.start();

当我删除barba.js代码时，菜单代码可以正常工作，当我打开任何未从顶部打开的页面时，移动设备上的barba.js还有另一个问题，我将其添加到了barba.js中，但是它仅适用于台式机：

$(window).scrollTop(0);

Barba.js阻止代码正常工作

0 个答案: