本文通過javascript實(shí)現(xiàn)漂亮的頁面過濾動(dòng)畫效果，用戶通過點(diǎn)擊頁面左側(cè)的菜單，對(duì)應(yīng)的頁面加載時(shí)伴隨著滑動(dòng)過濾動(dòng)畫，并帶有進(jìn)度條效果。用戶體驗(yàn)度非常好，感興趣的朋友一起看看吧

用戶通過點(diǎn)擊頁面左側(cè)的菜單，對(duì)應(yīng)的頁面加載時(shí)伴隨著滑動(dòng)過濾動(dòng)畫，并帶有進(jìn)度條效果。當(dāng)然頁面的加載是Ajax驅(qū)動(dòng)的，整個(gè)加載過渡過程非常流暢，非常好的用戶體驗(yàn)。

HTML

HTML結(jié)構(gòu)中，.cd-main包含頁面主體內(nèi)容，.cd-side-navigation包含著側(cè)邊導(dǎo)航條，#cd-loading-bar則是用來做進(jìn)度條動(dòng)畫用的。

<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固定在頁面左側(cè)，并且設(shè)置它的高度為100%，這樣左側(cè)導(dǎo)航菜單就始終占據(jù)左側(cè)邊欄，右側(cè)主體內(nèi)容滾動(dòng)時(shí)，左側(cè)導(dǎo)航菜單不動(dòng)。

.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

當(dāng)我們點(diǎn)擊左側(cè)菜單時(shí)，調(diào)用triggerAnimation()函數(shù)，這個(gè)函數(shù)會(huì)觸發(fā)加載進(jìn)度條動(dòng)畫函數(shù)loadingBarAnimation()，接著加載頁面內(nèi)容函數(shù)：loadNewContent()。

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

當(dāng)新頁面被選中時(shí)，一個(gè)新的元素.cd-section將會(huì)被創(chuàng)建并且插入到DOM中，然后load()新的url內(nèi)容。

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); 
      } 
 
      // ... 
    }); 
  }); 
}

通過異步加載的頁面要返回上一頁歷史瀏覽記錄的話，可以點(diǎn)擊瀏覽器上的返回即可。返回上一頁同樣有過渡動(dòng)畫效果。

您可能感興趣的文章: