问题 HTML 5页面转换

我希望在页面之间做出漂亮，现代的过渡。我找到了这个教程： 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％的情况下，单页应用程序是最佳解决方案。

2435

2018-06-13 15:01

起源

我想知道过渡属性是否可能是您正在寻找的，但它是一个css3解决方案。你可以在body元素上尝试它。 cardeo.ca/2010/creating-a-fading-link-transition-with-css3 - James Black

这不是你的问题的答案，但我检查了它是如何工作的，我不推荐它：淡出只是延迟新页面开始加载的时间，我没有看到任何关于效果的显着。 - George Katsanos

谢谢，但据我所知，链接有两种状态：普通和悬停，所以我们可以设置两种状态的样式，以及转换参数，其余的由浏览器完成。但是我有一个按钮，在onclick中更改window.location，我没有想法，如何为body生成2个状态：加载（正常）和加载（淡出）。 - noober

答案:

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>

2018-06-16 04:37

这是基于上面发布的正确答案，这对我帮助很大。不幸的是，它在chrome / linux中不适用于我，它在firefox中运行良好。无论如何，我一直在寻找一些略有不同的东西，因为我想在所有页面中都有一个共同的标题所以这是我的adatped解决方案。

<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>

主要备注：

页面不需要按钮或任何东西，这里是处理程序是所有页面共有的标题。
该 href 属性被禁用，因为我们不想真正导航，只是重新填充 src 为了 iframe。
现在 change() 功能需要一个参数 page 用于确定要加载的页面;如前所述，相反传递目的地的 a 在里面 href 属性，我们将它作为函数参数传递给 change()。

2017-09-20 17:25

问题 HTML 5页面转换

答案:

热门问题