javascript 如何在不同页面之间创建动画页面过渡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17053897/
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
How do I create animated page transitions between different pages?
提问by user2457563
Say I have the pages:
假设我有以下页面：
test1.html test2.html test3.html
test1.html test2.html test3.html
And I want to link test1.html to test2.html and test1.html to test3.html
我想将 test1.html 链接到 test2.html 并将 test1.html 链接到 test3.html
Using page anchors and iframes, I had the issue that when going from test1 to test3, it scrolled through test2 also.
使用页面锚点和 iframe 时，我遇到了从 test1 到 test3 时它也滚动到 test2 的问题。
I found something cool called jquery mobile page transitions (http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html) but everytime it would tell me could not load page. This is however exactly what i want. Different page transitions (i can choose between sliding top, left, down, etc.) for each button/link i want to create.
我发现了一些很酷的东西，叫做 jquery 移动页面转换（http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html），但每次它都会告诉我无法加载页面。然而这正是我想要的。对于我想要创建的每个按钮/链接，不同的页面转换（我可以在顶部、左侧、底部滑动等之间进行选择）。
If there's a way to do this in CSS that would be awesome!
如果有一种方法可以在 CSS 中做到这一点，那就太棒了！
回答by Froxz
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/Take a look here loading with ajax with Slide Down You can work a little bit this Tutorial to load the whole Page as drop down or fadeIn. Only with CSS I think it is not possible.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/看看这里用滑动加载ajax你可以工作一点本教程将整个页面加载为下拉或淡入淡出。仅使用 CSS 我认为这是不可能的。
回答by Robert McKee
Not exact code, but should get you started.
不是确切的代码，但应该可以帮助您入门。
$(document).ready(function(){
$('body').fadeIn();
$('a').click(function(e){
window.goto=$(this).attr("href");
$('body').fadeOut('fast',function(){
document.location.href=window.goto;
});
e.preventDefault();
});
});
CSS:
CSS：
body{display:none;}
Just be aware that if you are using other jQuery plug-ins that need to know an element's height that they will likely break because the element won't have a height until the fadeIn is complete. You might be able to get around this by using visible:hidden instead of display:none to do the initial hiding.
请注意，如果您正在使用其他需要知道元素高度的 jQuery 插件，它们可能会中断，因为在淡入淡出完成之前元素不会有高度。您可以通过使用 visible:hidden 而不是 display:none 来进行初始隐藏来解决此问题。
