2

我正在寻求实现页面转换，从而链接到另一个页面，而不是加载页面，而是将下一页滑入下一页。类似于MOVE此演示站点上的转换：http: //tympanus.net/Development/PageTransitions/
虽然这不太正确，因为这只是一页（即 url 不会改变），但它们需要在单独的页面。

我得到了这样的东西：
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;
        });
    });

});

但这并不完全正确，因为此方法先向上滑动当前页面，然后再向下滑动下一页，但是这里的 url 更改是好的。任何建议将不胜感激！

4

3 回答 3

2

如果我理解正确，您想要滑动一些东西，而不是仅仅滑动任意 div，您想要在一个全新的网页中滑动？

你可以做的是使用 AJAX。所以基本上，发出一个 ajax 请求，然后当您收到数据时，将您的 #next-page.html() 更改为您收到的数据。

不过，您现在必须循环它们，因此设置“#active-page”可能会更好。

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

以下是您需要的东西：

  • 两个“页面”。您将在使用过程中重复使用这些。

  • 当用户单击链接时，进行 ajax 调用，然后将“非活动页面”替换为您收到的数据。

  • 使“非活动页面”处于活动状态，然后应用您的动画。

  • 将替换的页面变为“非活动页面”

随意问我的回答是否有任何含糊之处。

于 2013-08-02T13:37:43.187 回答
1

您可以将查询字符串设置为?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>
于 2013-08-02T13:28:24.397 回答
1

关于动画：

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

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

这些动画的基石在animations.css 文件中。请注意底部的命名关键帧及其工作方式：

@-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 的浏览器中，页面就像任何其他站点一样加载。

于 2013-08-02T13:38:58.177 回答