jQuery 页面转换，如何将页面滑入现有页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18017671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
page transitions, how to slide a page in over the existing one
提问by user1374796
I'm looking to achieve a page transition whereby a link to another page will, instead of loading the page, slide the next page in over the next one. Something like the MOVEtransitions on this demo site: http://tympanus.net/Development/PageTransitions/
Although this isn't quite right as this is all one page (i.e. the url doesn't change), they need to be transitions between separate pages.
I got as far as something like this:
HTML:
我希望实现一个页面转换，通过这个链接到另一个页面的链接，而不是加载页面，将下一页滑入下一页。类似于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:
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;
});
});
});
But this isn't quite right as this method slides the current page upwards, before sliding the next page downwards, but the url change here is good. Any suggestions would be greatly appreciated!
但这并不完全正确，因为此方法将当前页面向上滑动，然后向下滑动下一页，但是这里的 url 更改是好的。任何建议将不胜感激！
采纳答案by Secret
If I get this correctly, you want to slide something, but instead of just sliding an arbitrary div, you want to slide in a whole new web page?
如果我理解正确，你想滑动一些东西，但不仅仅是滑动一个任意的 div，你想在一个全新的网页中滑动？
What you could do is use AJAX. So basically, make an ajax request then when you receive the data, change your #next-page.html() to the data you received.
你可以做的是使用 AJAX。所以基本上，发出一个ajax请求，然后当您收到数据时，将#next-page.html()更改为您收到的数据。
You'll have to cycle them now though, so setting an '#active-page' is probably better.
不过，您现在必须循环它们，因此设置“#active-page”可能会更好。
Here is the site where I used that. http://cs75.heliohost.org/When you click a link, a slide animation is shown, but if I edited my slide's html I could have put the new page on that sliding rectangle.
这是我使用它的网站。http://cs75.heliohost.org/当您单击链接时，会显示幻灯片动画，但如果我编辑了幻灯片的 html，我可以将新页面放在该滑动矩形上。
Here are the things you need:
以下是您需要的东西：
Two 'Pages'. You will be reusing these as you go.
When a user clicks a link, make an ajax call, then replace the 'inactive-Page' with the data you receive.
Make the 'inactive-Page' active and then apply your animation.
Turn the replaced page as 'inactive-Page'
两个“页面”。您将在使用过程中重复使用这些。
当用户单击链接时，进行 ajax 调用，然后用您收到的数据替换“非活动页面”。
使“非活动页面”处于活动状态，然后应用您的动画。
将替换页面转为“非活动页面”
Feel free to ask if there was anything vague in my answer.
随意问我的回答是否有任何含糊之处。
回答by Shauna
Regarding the animation:
关于动画：
If you want both to slide up, you have to tell both to slide up. So instead of your "slideDown", use "slideUp".
如果你想让两者都向上滑动，你必须告诉两者都向上滑动。因此，不要使用“slideDown”，而是使用“slideUp”。
If you look at the page's source, you'll see they're actually using CSS animations to do most of the work. This allows them to easily run two animations at once and allows the browser to use hardware acceleration to handle the animation (jQuery, and JS in general, tend to queue them by default, but you can add queue:false to make them run at the same time, and JavaScript doesn't yet have access to hardware acceleration).
如果您查看页面的源代码，您会发现它们实际上使用 CSS 动画来完成大部分工作。这使它们可以轻松地同时运行两个动画，并允许浏览器使用硬件加速来处理动画（通常 jQuery 和 JS，默认情况下倾向于将它们排队，但您可以添加queue:false 使它们运行在同时，并且 JavaScript 还不能访问硬件加速）。
The keystone of these animations are in the animations.css file. Notice the named keyframes at the bottom and how they work:
这些动画的基石在animations.css 文件中。注意底部的命名关键帧及其工作方式：
@-webkit-keyframes moveToTop {
to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
to { transform: translateY(-100%); }
}
You don't need to make them keyframes like that, you can just build them into the elements (or classes) themselves. I think they use named keyframes because they use a lot of the same animations over and over again. The transforms, though, are what makes them move up (or any other direction you want).
您不需要像那样使它们成为关键帧，您只需将它们构建到元素（或类）中即可。我认为他们使用命名关键帧是因为他们一遍又一遍地使用许多相同的动画。但是，变换是使它们向上移动（或您想要的任何其他方向）的原因。
Regarding the URL changes:
关于网址变更：
Instead of trying to write the functionality yourself, you might want to look into Pjax. It's the library that makes GitHub do the page slide thing that you're looking for. If nothing else, you can look at the source and see how they do it.
与其尝试自己编写功能，不如研究Pjax。正是该库让 GitHub 执行您正在寻找的页面幻灯片操作。如果不出意外，您可以查看来源，看看他们是如何做到的。
How it works is by combining AJAX with PushState (hence the name). When you click a link, the JavaScript overrides the default click behavior and makes an AJAX call to get the new content. It then activates a PushState call, which updates the browser's URL (this is the key to the "different pages" thing), and animates in the new content. In browsers that don't support PushState, the pages just load like any other site.
它的工作原理是将 AJAX 与 PushState 结合起来（因此得名）。当您单击链接时，JavaScript 会覆盖默认的单击行为并进行 AJAX 调用以获取新内容。然后它激活一个 PushState 调用，它更新浏览器的 URL（这是“不同页面”的关键），并在新内容中设置动画。在不支持 PushState 的浏览器中，页面就像任何其他站点一样加载。
回答by jcubic
You can set the query string to ?animate=trueand animate downwards in next-page.html
您可以将查询字符串?animate=true设置为向下动画next-page.html
$(function() {
if (location.search.match(/animate=true/)) {
$('body').hide().slideDown();
}
});
You can also hide the body using html so it will be hidden before DOM ready.
您还可以使用 html 隐藏主体，以便在 DOM 准备好之前将其隐藏。
and the link would be
链接将是
<a href="next-page.html?animate=true" class="slide_page">Link</a>
