javascript - 如何为 pjax-standalone 添加淡入/淡出效果？

Question

我正在使用 PJAX-Standalone为网站加载页面，我想在加载新内容时添加淡出/淡入过渡，但是，我不确定如何最好地实现这一点。

PJAX 文档描述了“回调”，有没有一种方法可以将淡入淡出过渡附加到其中一个，以便在新内容淡入时现有内容淡出？我作为 jQuery/Javascript 菜鸟首先进入这个领域，但我渴望学习，所以非常感谢任何帮助/建议!

这是我包含在我的 wrapper.php 中的内容:

// PJAX links!
  pjax.connect({
    'container': 'content',
    'success': function(event){
      var url = (typeof event.data !== 'undefined') ? event.data.url : '';
      console.log("Successfully loaded "+ url);
    },
    'error': function(event){
      var url = (typeof event.data !== 'undefined') ? event.data.url : '';
      console.log("Could not load "+ url);
    },
    'ready': function(){
    console.log("PJAX loaded!");
    }
  });

Answer 1

可能最简单的方法是隐藏包装 #content div 的容器，然后在加载内容后淡入淡出。淡出内容然后淡入新内容会有点困难，实际上你不会通过淡出获得太多好处，pjax 容器加载内容的速度会比你淡出快，所以它看起来很傻使其淡出。既然你在下面的评论中说你可以使用 jquery，我就使用它，因为它最简单。所以我要做的是用一个容器包装你想要淡入的内容，并给它一个 #content-container 的 id。如果您使用的标记类似于 github 页面上的标记，您可以使用如下内容:

<div id='content-container>
    <div class='container'>
        <div id='content' class='col-sm-8'>
            <?php echo $contents; ?>            
        </div>
        <div class='col-sm-4'>
            ... sidebar stuff ...
        </div>
    </div>
    <footer>
        ... footer stuff ...
    </footer>
</div>

您的 javascript 和 jquery 代码将如下所示:

    // PJAX links!
    pjax.connect({
        'container': 'content',
        'success': function(event){
            var url = (typeof event.data !== 'undefined') ? event.data.url : '';
            console.log("Successfully loaded "+ url);
        },
        'error': function(event){
            var url = (typeof event.data !== 'undefined') ? event.data.url : '';
            console.log("Could not load "+ url);
        },
        'ready': function(){
            console.log("PJAX loaded!");
        },
        'beforeSend': function(e){
            $('#content-container').hide();
        },
        'complete': function(e){
            $('#content-container').fadeIn(1000);
        }
    });

所以发生的事情是我们将 #content-container 隐藏在 pjax beforeSend 上，然后像这样在 pjax complete 上淡入淡出在文档的回调部分说。您可以通过更改显示 .fadeIn(1000) 的数字来控制它淡入的速度，将其更改为 800 会使其更快。

无论如何，如果您有任何问题，请在下面的评论中告诉我，希望这不会太困惑。