如何为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，所以我将只使用它，因为它是最简单的。 因此，我要做的是使用容器包装要淡入的内容，并为其指定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可以使其更快。

无论如何，如果您在下面的评论中遇到任何问题，希望这不会让您感到困惑。