基於javascript實現漂亮的頁面過渡動畫效果附源碼下載，javascript源碼下載

基於javascript實現漂亮的頁面過渡動畫效果附源碼下載，javascript源碼下載

使用者通過點擊頁面左側的菜單，對應的頁面載入時伴隨著滑動過濾動畫，並帶有進度條效果。當然頁面的載入是Ajax驅動的，整個載入過渡過程非常流暢，非常好的使用者體驗。

HTML

HTML結構中，.cd-main包含頁面主體內容，.cd-side-navigation包含著側邊導航條，#cd-loading-bar則是用來做進度條動畫用的。

<nav class="cd-side-navigation">   <ul>     <li>       <a href="index.html" class="selected" data-menu="index">         <svg><!-- svg content here --></svg>         Intro       </a>     </li>     <li>       <!-- ... -->     </li>     <!-- other list items here -->   </ul> </nav> <!-- .cd-dashboard --> <main class="cd-main">   <section class="cd-section index visible">     <header>       <div class="cd-title">         <h2>Animated Page Transition #2</h2>         <span>Some text here</span>       </div>       <a href="#index-content" class="cd-scroll">Scroll Down</a>     </header>     <div class="cd-content" id="index-content">       <!-- content here -->     </div> <!-- .cd-content -->   </section> <!-- .cd-section --> </main> <!-- .cd-main --> <div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar --> 

CSS

我們將.cd-side-navigation固定在頁面左側，並且設定它的高度為100%，這樣左側導覽功能表就始終佔據左側邊欄，右側主體內容滾動時，左側導覽功能表不動。

.cd-side-navigation {  position: fixed;  z-index: 3;  top: 0;  left: 0;  height: 100vh;  width: 94px;  overflow: hidden; } .cd-side-navigation ul {  height: 100%;  overflow-y: auto; } .cd-side-navigation::before {  /* background color of the side navigation */  content: '';  position: absolute;  top: 0;  left: 0;  height: 100%;  width: calc(100% - 4px);  background-color: #131519; } .cd-side-navigation li {  width: calc(100% - 4px); } .cd-side-navigation a {  display: block;  position: relative; } .cd-side-navigation a::after {  /* 4px line to the right of the item - visible on hover */  content: '';  position: absolute;  top: 0;  right: -4px;  height: 100%;  width: 4px;  background-color: #83b0b9;  opacity: 0; } .no-touch .cd-side-navigation a:hover::after {  opacity: 1; }

JavaScript

當我們點擊左側菜單時，調用triggerAnimation()函數，這個函數會觸發載入進度條動畫函數loadingBarAnimation()，接著載入頁面內容函數：loadNewContent()。

function loadingBarAnimation() {   var scaleMax = loadingBar.data('scale');   if( scaleY + 1 < scaleMax) {     newScaleValue = scaleY + 1;   }   // ...      loadingBar.velocity({     scaleY: newScaleValue   }, 100, loadingBarAnimation); }

當新頁面被選中時，一個新的元素.cd-section將會被建立並且插入到DOM中，然後load()新的url內容。

function loadNewContent(newSection) {   var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);      //load the new content from the proper html file   section.load(newSection+'.html .cd-section > *', function(event){          loadingBar.velocity({       scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)     }, 400, function(){              section.addClass('visible');        var url = newSection+'.html';        if(url!=window.location){         //add the new page to the window.history         window.history.pushState({path: url},'',url);       }        // ...     });   }); }

通過非同步載入的頁面要返回上一頁曆史瀏覽記錄的話，可以點擊瀏覽器上的返回即可。返回上一頁同樣有過渡動畫效果。