Javascript JS 或 Css 页面在 2 个完整页面之间滑动过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14316402/
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
JS or Css page slide transition between 2 full pages
提问by Lince81
I have two html pages: Page1.html, Page2.html. I would like to slide between the two pages. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
我有两个 html 页面：Page1.html、Page2.html。我想在两页之间滑动。我找到了很多插件和解决方案来在两个 div 之间滑动或在容器内滑动，但我需要的是完整的页面更改。
I found somethingbut the problem is that jquery code on page2 does not fire when the page loads. I could use jQuery mobile but my project uses jQuery ui and it gives me some conflicts... so I need something else.
我发现了一些问题，但问题是页面加载时 page2 上的 jquery 代码不会触发。我可以使用 jQuery mobile，但我的项目使用 jQuery ui，它给了我一些冲突......所以我需要其他东西。
The project is supposed to run on iPad so it would be cool to have sliding pages that you can drag. But I would be happy to just find a plugin for the slide.
该项目应该在 iPad 上运行，因此拥有可以拖动的滑动页面会很酷。但我很乐意为幻灯片找到一个插件。
Thank you.
谢谢你。
回答by X-spert
You have few solutions, like using Ajax for adding content to "new pages" and add some sliding effect with jQuery. There is some topics about that on Stack Overflow:
您几乎没有解决方案，例如使用 Ajax 向“新页面”添加内容并使用 jQuery 添加一些滑动效果。Stack Overflow 上有一些关于它的主题：
slide between pages using jQuery
Clues on sliding between pages effect
Or just add some effect on page ready like in this sample:
或者只是在页面上添加一些效果，就像在这个示例中一样：
<html>
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('body div').slideDown();
});
</script>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: blue; display: none;">
<a href="page2.htm" style="color: white;">PAGE 2>></a>
</div>
</body>
<html>
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('body div').slideDown();
});
</script>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: red; display: none;">
<a href="page1.htm" style="color: white;">PAGE 1>></a>
</div>
</body>
Good luck!
祝你好运！
回答by Patrick
I was looking for a full page transition vs. many examples that show one page with a couple of DIVs. I found that Animate.css does the trick very well.
我正在寻找一个完整的页面转换，而不是许多显示一个页面有几个 DIV 的示例。我发现 Animate.css 很好地完成了这个技巧。
