HTML 5页面转换 [英] HTML 5 page transitions
问题描述
我想做一个漂亮，现代的过渡页面之间。我找到了本教程： http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
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/
作者使用JQuery来使它工作，但我想在纯HTML5中做。
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?
UPDATE
在2014年年底，我想添加以下评论。在做它之前三思，做一个单页AJAX网络应用程序与DIV之间的CSS3过渡不会更好。这个问题描述了一个非常罕见的非常特殊的情况。在其余的99％的情况下，单页应用是最好的解决方案。
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.
推荐答案
index.htm：
index.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
page1.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>
这篇关于HTML 5页面转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
