如何将 fade in/out 效果添加到 pjax-standalone？

Question

我正在使用 PJAX-Standalone 加载网站页面，我想在加载新内容时添加淡入淡出 out/in 过渡，但是，我不确定如何最好为了达成这个。

PJAX 文档描述了 'callbacks'，有没有办法将淡入淡出过渡添加到其中一个，以便现有内容淡出而新内容淡入？我作为一个 jQuery/Javascript 菜鸟首先跳进这个脑袋，但我渴望学习，所以非常感谢任何 help/advice！

这是我在 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 这个问题，我就使用它，因为它最简单。所以我要做的是用一个容器包装你想要淡入的内容，并给它一个 id #content-container。如果您使用的标记类似于 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 会使其更快。

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

如何将 fade in/out 效果添加到 pjax-standalone？

How to add fade in/out effect to pjax-standalone?

javascript

css

ajax

jquery

pjax