Realisasikan kesan animasi peralihan halaman yang indah berdasarkan javascript dengan kemahiran download_javascript kod sumber

Dengan mengklik menu di sebelah kiri halaman, halaman yang sepadan akan dimuatkan dengan animasi penapis gelongsor dan kesan bar kemajuan. Sudah tentu, pemuatan halaman adalah didorong oleh Ajax, dan keseluruhan proses peralihan pemuatan adalah sangat lancar dan memberikan pengalaman pengguna yang sangat baik.

HTML

Dalam struktur HTML, .cd-main mengandungi kandungan utama halaman, .cd-side-navigation mengandungi bar navigasi sisi dan #cd-loading-bar digunakan untuk animasi bar kemajuan.

<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

Kami menetapkan .cd-side-navigation di sebelah kiri halaman dan menetapkan ketinggiannya kepada 100%, supaya menu navigasi kiri sentiasa menduduki bar sisi kiri Apabila kandungan utama di sebelah kanan ditatal, sebelah kiri menu navigasi tidak bergerak.

.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

Apabila kita mengklik pada menu kiri, fungsi triggerAnimation() dipanggil Fungsi ini akan mencetuskan fungsi animasi bar kemajuan memuatkan loadingBarAnimation(), dan kemudian memuatkan fungsi kandungan halaman: loadNewContent().

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

Apabila halaman baharu dipilih, elemen baharu .cd-section akan dibuat dan dimasukkan ke dalam DOM, dan kemudian muat() kandungan url baharu.

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

Jika anda ingin kembali ke sejarah penyemakan imbas halaman sebelumnya melalui halaman yang dimuatkan secara tidak segerak, anda boleh mengklik Kembali pada penyemak imbas. Kembali ke halaman sebelumnya juga mempunyai kesan animasi peralihan.