HTML 5页面过渡

问题描述

| 我想在页面之间进行漂亮，现代的过渡。我找到了本教程：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ 作者使用JQuery使其工作，但我想在纯HTML5中实现。比如说CSS5中有HTML5的功能吗？更新在2014年末，我想添加以下评论。在三思而后行之前，最好制作一个单页AJAX网络应用程序，并在DIV之间使用CSS3过渡。问题描述了一种非常特殊的情况，这种情况极为罕见。在其余99％的情况下，单页应用程序是最佳解决方案。

解决方法

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

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

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

</body>
</html>

page2.htm

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

, 这是基于上面发布的正确答案，这对我有很大帮助。不幸的是，它在chrome / linux中对我不起作用，在Firefox中效果很好。无论如何，我一直在寻找略有不同的东西，因为我想要在所有页面中使用相同的标题。所以这是我的解决方案。

<html>
<head>

<style>
body,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>

主要说明：页面不需要有按钮或任何东西，这里是处理程序是所有页面共有的标题。 href属性已禁用，因为我们不想真正导航，只是将ѭ5填充为ѭ6。现在change()函数需要一个参数“ 8”，用于确定要加载的页面；如前所述在href属性中传递a的目的地时，将其作为函数参数传递给change()。

html 过渡页面页面