页面过渡，如何在现有页面上滑动页面
我希望实现一个页面转换，其中另一个页面的链接，而不是加载页面，滑入下一个页面在下一个页面。此演示站点上类似于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更改是很好的。如有任何建议，我们将不胜感激！
回答 3
Stack Overflow用户
发布于 2013-08-02 21:37:43
如果我没弄错的话，你想要滑动一些东西，而不是只滑动一个任意的div，你想在一个全新的网页中滑动吗？
你能做的就是使用AJAX。因此，基本上，发出一个ajax请求，然后在接收到数据时，将#next-page.html()更改为接收到的数据。
不过，你现在必须循环它们，所以设置一个'#active-page‘可能更好。
这就是我使用它的网站。http://cs75.heliohost.org/单击链接时，将显示幻灯片动画，但如果我编辑幻灯片的html，我可以将新页面放在那个滑动矩形上。
以下是你需要的东西：
- 有两个“页面”。当用户单击链接时，进行ajax调用，然后用您收到的数据替换‘inactive-
- ’。
- 使'inactive- page‘处于活动状态，然后将您的animation.
- Turn作为'inactive-Page'
应用于被替换的页面
请随时询问我的回答中是否有含糊之处。
Stack Overflow用户
发布于 2013-08-02 21:28:24
您可以将查询字符串设置为?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>Stack Overflow用户
发布于 2013-08-02 21:38:58
关于动画：
如果你想让两个都往上滑，你就得让它们都往上滑。所以用"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%); }
}你不需要让它们成为那样的关键帧，你只需要将它们构建到元素(或类)本身中。我认为他们使用命名关键帧是因为他们一遍又一遍地使用很多相同的动画。然而，变换是使它们向上移动(或任何其他您想要的方向)的原因。
关于URL更改：
您可能希望研究一下Pjax，而不是尝试自己编写功能。正是这个库让GitHub实现了你想要的页面滑动功能。如果没有其他事情，你可以查看源代码，看看他们是如何做到的。
它的工作原理是将AJAX与PushState相结合(由此得名)。当您单击一个链接时，JavaScript会覆盖默认的单击行为，并进行AJAX调用以获取新内容。然后，它激活一个PushState调用，该调用更新浏览器的URL (这是“不同页面”的关键)，并在新内容中生成动画。在不支持PushState的浏览器中，页面的加载方式与其他站点一样。
https://stackoverflow.com/questions/18017671
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号