Question

我正在探索使用AJAX进行优雅的页面过渡的选择。

我尝试了两种方法，第一种是从此页面获取的手动编码选项（https://codyhouse.co/gem/animated-page-transition），第二种是使用Barba.js的选项（http://barbajs.org）。

同时使用这两个选项，网站上的脚本在加载第一页时起作用，但是当单击链接并通过AJAX加载不同的页面时，这些脚本均不起作用。

最初，我使用嵌入式html文件将脚本加载到了每个页面的末尾（我使用的是ExpressionEngine）。在阅读了该站点上的许多帖子后，我认为将脚本放入自己的JS文件中可能会有所帮助，以便将其缓存，然后每个页面都可以使用这些脚本，但这也不起作用。

是否有一种方法可以告诉AJAX或Barba.js每次更改页面都运行脚本？

这是我启动Barba的代码：

<script type="text/javascript">
    $(document).ready(function () {
        // START BARBA.JS
        Barba.Pjax.start();
        // BARBA.JS PAGE TRANSITIONS
        Barba.Pjax.start();
        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!
             */
            var _this = this;
            var $el = $(this.newContainer);
            $(this.oldContainer).hide();
            $el.css({
              visibility : 'visible',
              opacity : 0
            });
            $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() {
          /**
           * Here you can use your own logic!
           * For example you can use different Transition based on the current page or link...
           */
          return FadeTransition;
        };
    });
</script>

这是我要开始工作的脚本：

// DROPDOWN MENU
$(function(){
    $("ul.dropdown li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").addClass("arrow");
});

预先感谢

汤姆

Answer 1

我没有遇到barba.js，但是在jQuery中，当我们使用$（function {...}）;就像使用$（document）.ready（function（）{...}）;准备好文档后启动。动画结束时可能未启动。我不确定，但是您可以尝试创建不同的视图，然后在onEnter回调方法中编写自定义javascript代码：

视图：

<div class="barba-container" data-namespace="homepage">

字幕：

var Homepage = Barba.BaseView.extend({
  namespace: 'homepage',
  onEnter: function() {
      // The new Container is ready and attached to the DOM.
       YOUR JS !!!!

  },
  onEnterCompleted: function() {
      // The Transition has just finished.
  },
  onLeave: function() {
      // A new Transition toward a new page has just started.
  },
  onLeaveCompleted: function() {
      // The Container has just been removed from the DOM.
  }
});

// Don't forget to init the view!
Homepage.init();

http://barbajs.org/views.html

Answer 2

您退出的问题不清楚，基本上ajax用于呈现加载的页面，如果您的页面已经被加载，则只需将此脚本添加到您的根网页，然后在ajax调用后检查其是否正常工作。

使用AJAX（Barba.js）加载新页面后脚本未加载

2 个答案: