HTML 5页面转换

Question

HTML 5页面转换

noo*_*ber 11 css html5

我想在页面之间做出漂亮,现代的过渡.我找到了这个教程:http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

作者使用JQuery使其工作,但我想在纯HTML5中完成它.HTML5中是否有一个功能可以在CSS中执行此操作？

UPDATE

在2014年底,我想添加以下评论.在做三思之前,制作一个单页面的AJAX网络应用程序,在DIV之间进行CSS3过渡不是更好.这个问题描述了一种非常罕见的特殊情况.在其余99%的情况下,单页应用程序是最佳解决方案.

Answer 1

noo*_*ber 7

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>

Run Code Online (Sandbox Code Playgroud)

page1.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page1

<button onclick="parent.change();">
click me
</button>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

page2.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	37770 次
最近记录：	11 年，3 月前