Question

我正在寻求实现页面转换，其中指向另一个页面的链接将不会加载页面，而是将下一页滑入下一页。类似于此演示网站上MOVE转换的内容：http://tympanus.net/Development/PageTransitions/
虽然这不是很正确，因为这是一个页面（即网址没有改变），但它们需要在不同的页面之间进行转换。

我得到了一些东西像这样：
HTML：

<body>
    <div class="container">
        <a href="next-page.html" class="slide_page">Link</a>
        TEXT GOES HERE
    </div>
</body>

jQuery的：

$(function(){
    // hide the div on page load and use a slidedown effect
    $('div.container').fadeOut(0, function(){
        $(this).slideDown(500);
    });
    // capture link clicks and slide up then go to the links href attribute
    $('a.slide_page').click(function(e){
        e.preventDefault();
        var $href = $(this).attr('href');
        $('div.container').slideUp(500, function(){
            window.location = $href;
        });
    });

});

但这不太正确，因为此方法向下滑动当前页面，然后向下滑动下一页，但此处的网址更改是好的。任何建议将不胜感激！

Answer 1

如果我正确地得到了这个，你想要滑动一些东西，但是你想要在一个全新的网页中滑动，而不是只滑动一个任意的div？

你能做的就是使用AJAX。所以基本上，当你收到数据时，发一个ajax请求，把你的＃next-page.html（）更改为你收到的数据。

您现在必须将它们循环播放，因此请设置“＃active-page＆＃39;可能更好。

这是我使用它的网站。 http://cs75.heliohost.org/当您点击链接时，会显示幻灯片动画，但如果我编辑了幻灯片的html，我可以将新页面放在该滑动矩形上。

以下是您需要的东西：

两页＆＃39;。你将在重复使用它们。
当用户点击链接时，进行ajax调用，然后替换＆＃39;不活动页＆＃39;与您收到的数据。
制作＆＃39;非活动页面＆＃39;激活，然后应用动画。
将更换后的页面设为＆＃39;非活动页面

随意问我的答案中是否有任何含糊不清的内容。

Answer 2

您可以将查询字符串设置为?animate=true，并在next-page.html

中向下设置动画

$(function() {
   if (location.search.match(/animate=true/)) {
      $('body').hide().slideDown();
   }
});

您还可以使用html隐藏正文，以便在DOM准备好之前隐藏它。

，链接将是

<a href="next-page.html?animate=true" class="slide_page">Link</a>

Answer 3

关于动画：

如果你想两者都向上滑动，你必须告诉两者向上滑动。因此，请使用“slideUp”而不是“slideDown”。

如果您查看页面的来源，您会发现他们实际上正在使用CSS动画来完成大部分工作。这允许他们一次轻松地运行两个动画，并允许浏览器使用硬件加速来处理动画（jQuery和JS一般，默认情况下倾向于排队，但你可以添加queue:false to make them run at the same time，JavaScript也不会还没有硬件加速的访问权限。

这些动画的基石位于animations.css file。注意底部的命名关键帧及其工作原理：

@-webkit-keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
    to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
    to { transform: translateY(-100%); }
}

您不需要像这样制作关键帧，您可以将它们自己构建到元素（或类）中。我认为他们使用命名关键帧，因为他们一遍又一遍地使用大量相同的动画。但是，变换是使它们向上移动（或任何其他方向）的原因。

关于网址更改：

您可能希望查看Pjax，而不是尝试自己编写功能。这是使GitHub做你正在寻找的页面幻灯片的库。如果不出意外，您可以查看来源并了解他们是如何做到的。

它的工作原理是将AJAX与PushState相结合（因此得名）。单击链接时，JavaScript将覆盖默认的单击行为并进行AJAX调用以获取新内容。然后它激活PushState调用，更新浏览器的URL（这是“不同页面”的关键），并在新内容中设置动画。在不支持PushState的浏览器中，页面只是像任何其他站点一样加载。

页面过渡，如何在现有页面上滑动页面

3 个答案: