Question

我使用ajax加载下一页，它工作正常。（带有aws ajaxify插件的wordpress）

我现在想要的是保持当前页面可见，直到下一页加载并占据视口。

的链接

所以当我点击任何链接时，我的ajax插件会执行以下操作

准备变量

contentSelector = '#' + aws_data['container_id'],
        $content = $(contentSelector),

然后它添加淡出过渡

$body.ajaxify();

    // Hook into State Changes
    $(window).bind('statechange',function(){
        // Prepare Variables
        var
        State       = History.getState(),
        url         = State.url,
        relativeUrl = url.replace(rootUrl,'');

        // Set Loading
        $body.addClass('loading');

        // Start Fade Out
        // Animating to opacity to 0 still keeps the element's height intact
        // Which prevents that annoying pop bang issue when loading in new content

        if ( '' != aws_data['transition'] ) {
        $content.animate({opacity:0.6},900);

所以在这个缓慢的淡出后，插件请求带有ajax的新页面

// Ajax Request the Traditional Page

页面加载良好。现在，我希望有一些类似当前页面在后台仍然可见，新页面带有一个slideLeft过渡。

我准备好了slideLeft css课程。

我已准备好应用$content.addClass("slideLeft");但当我这样做时，当前页面会先消失，然后在黑屏上显示下一页...

那么我怎样才能实现这一点，当前页面仍然可见，直到下一页进入最左侧的位置？

我想要它的非常接近的原型是https://www.dropbox.com/guide/admin

由于

EDIT1

根据@vinrav的建议，我改变了代码，但是当下一页加载时，当前页面消失了

这是我改变的代码的粘贴框

http://pastebin.com/gVFjayDK

line no 122 to 125( fadeout after ajax request )
line no 140 ( adding transition class)

我猜我遇到正确的订单问题，寻求帮助。

非常感谢

Answer 1

您需要更改点击过程的顺序。

准备变量。
让ajax请求页面。
然后淡出当前页面。淡出时间需要大到足以通过ajaxing来获取获取所请求页面的时间。这取决于您的服务器速度，客户端互联网速度和其他因素。
当您收到请求的页面时，开始向左滑动过渡，如果当前页面淡出时间足够大，则不会出现黑屏。

我的推荐等到你通过ajax获得请求的页面，然后才开始淡出当前页面。你的近似原型（https://www.dropbox.com/guide/admin）就是这样的。 Dropbox网站等待响应来自ajax（你可以在页面顶部看到一个栏，它告诉我们等待...... ajax正在路上......）

修改

准备变量。

让ajax请求页面。

获取请求的页面。

开始淡出。

启动左侧滑动

使用ajax和css转换加载另一个页面时，保持当前页面可见

1 个答案: