HTML 5网页过渡

我想使页面之间一个很好的，现代的外观过渡。我发现这个教程：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/HTML 5网页过渡

笔者用了jQuery使它工作，但我想这样做纯HTML5。在HTML5中是否有这样的功能，例如在CSS中呢？

UPDATE

在2014年年底，我想补充以下评论。在做这件事之前，请三思，在DIV之间制作一个带有CSS3转换的单页AJAX网页应用程序不是更好。这个问题描述了一种非常罕见的非常特殊的情况。在其余99％的情况下，单页应用程序是最好的解决方案。

来源

2011-06-13 noober

不知过渡性质可能是你在找什么，但它是一个CSS3的解决方案。你可以在身体元素上尝试一下。 http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3 – 2011-06-13 15:15:09

这不是你的问题的答案，但我检查了这是如何工作的，我不会推荐它：淡出只是延迟了新页面开始加载的时间，并且我没有看到真正有效的任何显着内容。 – 2011-06-13 15:38:44

谢谢你，但据我了解，有一个链接的两种状态：正常，悬停，所以我们可以设置这两个州的样式，以及转换参数，其余是由浏览器来完成。但我有一个按钮，在onclick中改变window.location，并且我没有想法，如何为body创建2个状态：加载（正常）和加载（淡出）。 – noober 2011-06-13 15:56:15

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

来源

2011-06-16 04:37:01 noober

这是基于上面公布这帮助了我很多正确的答案。不幸的是，它在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属性被禁用，因为我们不想真正导航，只需为iframe重新填充src。
现在change()函数采用一个参数page是，用于确定要装入的页面;正如前面所说的，经过了a目的地在href属性，而不是，我们通过它为change()函数参数。

来源

2013-09-20 17:25:49 nixahn

HTML 5网页过渡

回答

相关问题