1

我有一个带有链接的网站。当我单击链接时，我希望使用 jQuery 将页面平滑过渡到下一页。我让 barba DOM 中的 HTML 元素淡出。但是当下一页尝试加载时，除了 JavaScript 之外的所有内容都会加载。

这是我的代码：（index.html）

   <div id="barba-wrapper" class="wrapper">
    <div class="barba-container">
        <div class="container">
            <span class="text1">Hey There!</span>
            <span class="text2">This is my portfolio!</span>
            <a id="homeLink" href="./home.html">Click me to continue</a>
        </div>
    </div>
</div>
<script>
    $('document').ready(function(){
        var transEffect = Barba.BaseTransition.extend({
            start: function(){
              this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
            },
            fadeInNewcontent: function(nc) {
              nc.hide();
              console.log('stuff should be hidden');
              var $el = $(this.newContainer);
              var _this = this;
              $(this.oldContainer).fadeOut(1000).promise().done(() => {
                nc.css('visibility', 'visible');
                nc.fadeIn(1000, function(){
                console.log('new content should fade in.');
                _this.done();
                })
              });
            }
        });
        Barba.Pjax.getTransition = function() {
          return transEffect;
        }
        Barba.Pjax.start();
    });
</script>

我可以在控制台中看到控制台日志，但没有加载 JavaScript。

这是我要加载的页面：（home.html）

<div id="barba-wrapper" class="wrapper">
    <div class="barba-container">
        <canvas></canvas>
        <script src="canvas.js"></script>
    </div>
</div>

我没有任何错误。我也在这里看到了一个与我的问题相同的问题，但很不清楚。（到目前为止还没有任何答案）谢谢！

4

2 回答 2

3

在 Barba 中，加载新容器时不会评估脚本。可以使用Events轻松完成。

Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container) {
    $(container).find('script').each(function (i, script) {
        var $script = $(script);
        $.ajax({
            url: $script.attr('src'),
            cache: true,
            dataType: 'script',
            success: function () {
                $script.trigger('load');
            }
        });
    });
});
于 2019-01-25T07:40:48.113 回答
-1

添加这一行：

document.getElementsByTagName("head")[0].innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">";

在下面的函数里面

fadeInNewcontent: function(nc) {

}
于 2019-09-05T18:24:44.503 回答