加载页面 Ajax，然后将其滑入页面或插件

Question

我的网站结构或多或少是这样的： 主页 - 第 1 页 - 第 2 页 - 第 3 页。
我会意识到一个网站在页面之间具有类似“移动应用程序”的过渡，您单击一个按钮然后新页面滑入。
现在我正在研究如何实现这一点，如果使用 AJAX（即加载页面并滑动它，但我不知道 AJAX）或使用插件（但我找不到任何东西）。
另一种选择是创建一个页面，然后进入该页面（最好找到一个插件来做到这一点）但是页面很大，所以我的网站会变得很重。
有谁知道如何帮助我？ 谢谢大家！

ps：该网站仅针对平板电脑和智能手机开发

Answer 1

有很多方法可以实现您想要的，下面我将向您展示其中一种。 （答案底部的示例）

您将内容隐藏在屏幕之外，并在页面加载时滑动：

HTML：

<div class="content_div">
    <p class="title">HOME</p>
    <a href="" class="nav">page 1</a>
</div>

CSS：

body{
    overflow:hidden;
}
.content_div {
    box-shadow:0 0 10px;
    border:10px solid black;
    height:800px;
    left:-1000px;
    width:100%;
    -webkit-animation:slide_in 800ms ease-out forwards;
    position:absolute;
    box-sizing:border-box;
}
.title{
    font-size:50px;
    text-align:center;
}
.nav{
    margin-left:20px;
}
@-webkit-keyframes slide_in{
    0% {
        left:-1000px;
    }
    100% {
        left:0px;
    }
}

现在，当您单击链接时，您会使用自定义处理程序拦截单击，防止默认重定向，执行“滑出”动画，一旦动画完成，您将手动重定向：

.promise().done() 中的函数将在对象上的所有动画完成后立即执行：

$(function(){
    $(".nav").on("click",function(ev){
        ev.preventDefault();        
        $(".content_div").animate({
            "margin-left":$(".content_div").width() +100
        }).promise().done(function(){
            window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
        });
    });
});

这是一个Live Example

在您网站的每个页面上实现这一点，您应该有滑动过渡。 如果您想要不同的动画，请更改过渡。

注意： 在 jsfiddle 中它会有点混乱，因为它会在内部自行打开，但在您的网站上它会根据需要运行。

AJAX 更新：

如果您想避免在窗口重新定位到新页面时页面消失，您需要从新页面动态加载内容，而不是更改位置。

你可以使用普通的 ajax 来做到这一点，或者你可以使用 jQuery 的 ajax 扩展 .load()，它在后台执行相同的 ajax：

$(".nav_waitforajax").on("click", function (ev) {
    ev.preventDefault();
    $(".content_div").animate({
        "margin-left": $(".content_div").width() + 100
    }).promise().done(function () {
        $(".content_div").load("/three", function () {
            $(".content_div").animate({
                "margin-left": 0
            });
        });
    });
});

Ajax Example

更新 2： 动态内容的委托处理程序：

//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
    $(this).css({
        "background":"red"
    });
});

Delegates Example