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網頁過渡

回答

相關問題