Question

我正在使用PJAX-Standalone加载网站的网页，并且我想在加载新内容时添加淡出/转换，但是，我不确定如何最好地实现这一目标。

PJAX文档描述了＆＃39;回调＆＃39;有没有办法将淡入淡出转换附加到其中一个，以便现有内容在新内容淡入时淡出？我首先作为jQuery / Javascript noob进入这个领域，但我渴望学习，所以非常感谢任何帮助/建议！

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

＆＃13;

+LiveParser:DEBUG: Outgoing: Writing DISCONNECT (KEY_EXCHANGE_FAILED)

+LiveParser:DEBUG: No matching Client->Server cipher

+LiveParser:DEBUG: (remote) Client->Server ciphers: aes128-cbc,3des-cbc,blowfish-cbc,cast128-cbc,arcfour,aes192-cbc,aes256-cbc

+LiveParser:DEBUG: (local) Client->Server ciphers: aes128-ctr,aes192-ctr,aes256-ctr,aes128-gcm,aes128-gcm@openssh.com,aes256-gcm,aes256-gcm@openssh.com

＆＃13;

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表示会更快。

无论如何，如果你在下面的评论中遇到任何问题，希望这不会太混乱。

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

1 个答案: