HTML 5 页面转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6332195/
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
HTML 5 page transitions
提问by noober
I want to make a nice, modern-looking transitions between pages. I've found this tutorial: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
我想在页面之间进行漂亮的、现代的过渡。我找到了这个教程：http: //www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The author uses JQuery to make it work, but I want to do it in pure HTML5. Is there a feature in HTML5 to do it, say, in CSS?
作者使用 JQuery 使其工作，但我想用纯 HTML5 来做。HTML5 中是否有一个功能可以做到这一点，比如说，在 CSS 中？
UPDATE
更新
In the end of 2014, I'd like to add the following comment. Before doing it think twice, wouldn't it be better to make a single-page AJAX web-app with CSS3 transitions between DIVs. The question describes a very special situation which is extremely rare. In the rest 99% cases a single page app is the best solution.
在 2014 年底，我想添加以下评论。在做之前三思而后行，用 DIV 之间的 CSS3 转换制作一个单页 AJAX 网络应用程序不是更好吗？这个问题描述了一种非常特殊的情况，这种情况极为罕见。在其余 99% 的情况下，单页应用程序是最佳解决方案。
采纳答案by noober
index.htm:
索引.htm：
<html>
<head>
<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }
#mainframe.normal
{
opacity: 1.0;
}
#mainframe.faded
{
opacity: 0.0;
}
#mainframe
{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
/* Standard */
transition-property: opacity;
transition-duration: 3s;
}
</style>
<script language="javascript">
function change()
{
document.getElementById('mainframe').className="faded";
setTimeout(function()
{
document.getElementById('mainframe').src='page2.htm';
document.getElementById('mainframe').className="normal";
}, (2 * 1000));
}
</script>
</head>
<body style="background-color:black;">
<iframe id="mainframe" class="normal" src="page1.htm"></iframe>
</body>
</html>
page1.htm
第1页.htm
<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page1
<button onclick="parent.change();">
click me
</button>
</body>
</html>
page2.htm
page2.htm
<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>
回答by nixahn
This is based on the correct answer posted above which helped me a lot. Unfortunately, it was not working for me in chrome/linux, it worked well in firefox. I was looking for something slightly different anyway, because I wanted a common header in all pages. So here is my adatped solution.
这是基于上面发布的正确答案，这对我有很大帮助。不幸的是，它在 chrome/linux 中对我不起作用，它在 Firefox 中运行良好。无论如何，我一直在寻找稍微不同的东西，因为我希望所有页面都有一个共同的标题。所以这是我的适应解决方案。
<html>
<head>
<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }
#mainframe.normal
{
opacity: 1.0;
}
#mainframe.faded
{
opacity: 0.0;
}
#mainframe
{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
/* Standard */
transition-property: opacity;
transition-duration: 3s;
}
</style>
<!--<script language="javascript">-->
<script>
function change(page)
{
// document.write('Hello World');
document.getElementById('mainframe').className="faded";
setTimeout(function()
{
document.getElementById('mainframe').src=page+'.html';
document.getElementById('mainframe').className="normal";
}, (2 * 1000));
}
</script>
</head>
<body style="background-color:black;">
<header id="header">
<h2 id="name">
FRANCISCO</br>
FRANCHETTI
</h2>
<nav id="pages">
<ul id="list-nav">
<li class="current"><a onclick="change('home')" href="#">HOME</a></li>
<li><a onclick="change('research')" href="#">RESEARCH</a></li>
<li><a onclick="change('teaching')" href="#">TEACHING</a></li>
<li><a onclick="change('contact')" href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<iframe id="mainframe" class="normal" src="home.html"></iframe>
</body>
</html>
Main Remarks:
主要备注：
- The pages do not need to have buttons or anything, here the handler is the header which is common to all pages.
- The
hrefattributes are disabled because we don't want to really navigate, just repopulate thesrcfor theiframe. - Now the
change()function takes a parameterpagethat is used to determine which page to load; as said before, instead of passing the destination for theain thehrefattribute, we pass it as a function argument forchange().
- 页面不需要有按钮或任何东西，这里的处理程序是所有页面共有的标题。
- 该
href属性被禁用，因为我们并不想真的导航，只需重新填充src的iframe。 - 现在该
change()函数采用一个参数page来确定要加载哪个页面；如前所述，我们不是a在href属性中传递 的目的地，而是将其作为 的函数参数传递change()。
