jQuery melaksanakan animasi peralihan halaman beralih effect_jquery

Saya akan terus memperkenalkan proses pengeluaran kepada anda, saya harap anda akan menyukainya.

Struktur HTML

Struktur HTML bagi kesan penukaran halaman ini menggunakan elemen e0c31c2eee5d6ce1e09513091e8ccb79 sebagai elemen pembalut halaman div.cd-cover-layer digunakan untuk membuat lapisan topeng apabila halaman bertukar -bar ialah Bar kemajuan pemuatan semasa pemuatan ajax.

<main>
 <div class="cd-index cd-main-content">
  <div>
   <h1>Page Transition</h1>
   <!-- your content here -->
  </div>
 </div>
</main>
 
<div class="cd-cover-layer"></div> <!-- this is the cover layer -->
 
<div class="cd-loading-bar"></div> <!-- this is the loading bar -->      

Gaya CSS

Kesan penukaran halaman ini menggunakan elemen pseudo::before dan body::after untuk mencipta dua lapisan topeng untuk menutup kandungan halaman semasa proses penukaran halaman. Kedudukan mereka tetap, dengan ketinggian sama dengan 50vh dan lebar 100%. Secara lalai, ia disembunyikan menggunakan sifat transformasi CSS (translateY(-100%)/translateY(100%)). Apabila pengguna menukar halaman, unsur-unsur ini dialihkan semula ke dalam port pandangan (dengan menambahkan kelas .page-is-changed pada elemen 6c04bd5ca3fcae76e30b72ad730ca86d).
Imej di bawah menunjukkan proses ini:

Kesan penukaran halaman

body::after, body::before {
 /* these are the 2 half blocks which cover the content once the animation is triggered */
 height: 50vh;
 width: 100%;
 position: fixed;
 left: 0;
}
body::before {
 top: 0;
 transform: translateY(-100%);
}
body::after {
 bottom: 0;
 transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
 transform: translateY(0);
}       

Apabila halaman bertukar, kesan fade-in dan fade-out kandungan halaman dicapai dengan menukar ketelusan div.cd-cover-layer. Ia menindih elemen .cd-main-content dengan warna latar belakang yang sama, dan kemudian menukar ketelusan daripada 0 kepada 1 apabila 6c04bd5ca3fcae76e30b72ad730ca86d ditambah dengan kelas .page-is-changes.
Bar kemajuan Memuatkan dibuat menggunakan .cd-loading-bar::before pseudo-element. Secara lalai ia dikecilkan (scaleX(0)) dan transform-origin: kiri tengah. Apabila suis halaman bermula ia dibesarkan kepada saiz asalnya menggunakan skalaX(1).

.cd-loading-bar {
 /* this is the loading bar - visible while switching from one page to the following one */
 position: fixed;
 height: 2px;
 width: 90%;
}
.cd-loading-bar::before {
 /* this is the progress bar inside the loading bar */
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 transform: scaleX(0);
 transform-origin: left center;
}
.page-is-changing .cd-loading-bar::before {
 transform: scaleX(1);
}       

Kesan peralihan lancar dalam kesan khas dicapai menggunakan Peralihan CSS. Kelewatan peralihan yang berbeza ditambahkan pada setiap elemen animasi untuk mencapai urutan animasi elemen yang berbeza.
JAVASCRIPT

Atribut data-type="page-transition" digunakan pada pautan dalam kesan penukaran halaman ini untuk mencetuskan acara penukaran halaman. Apabila pemalam mengesan peristiwa klik pengguna, kaedah changePage() akan dilaksanakan.

$('main').on('click', '[data-type="page-transition"]', function(event){
  event.preventDefault();
  //detect which page has been selected
  var newPage = $(this).attr('href');
  //if the page is not animating - trigger animation
  if( !isAnimating ) changePage(newPage, true);
});        

Kaedah ini akan mencetuskan animasi penukaran halaman dan memuatkan kandungan baharu melalui kaedah loadNewContent().

function changePage(url, bool) {
  isAnimating = true;
  // trigger page animation
  $('body').addClass('page-is-changing');
  //...
  loadNewContent(url, bool);
  //...
}        

Apabila kandungan baharu dimuatkan, ia akan menggantikan kandungan dalam elemen e0c31c2eee5d6ce1e09513091e8ccb79 Kelas .page-is-changing dialih keluar daripada badan dan kandungan yang baru dimuatkan ditambahkan pada window.history (menggunakan kaedah pushState()).

function loadNewContent(url, bool) {
  var newSectionName = 'cd-'+url.replace('.html', ''),
   section = $('<div class="cd-main-content '+newSectionName+'"></div>');
    
  section.load(url+' .cd-main-content > *', function(event){
   // load new content and replace <main> content with the new one
    $('main').html(section);
    //...
    $('body').removeClass('page-is-changing');
    //...
 
    if(url != window.location){
     //add the new page to the window.history
     window.history.pushState({path: url},'',url);
    }
 });
}        

Untuk mencetuskan kesan animasi penukaran halaman yang sama apabila pengguna mengklik butang belakang penyemak imbas, pemalam mendengar acara popstate dan melaksanakan fungsi changePage() apabila ia dicetuskan.

$(window).on('popstate', function() {
  var newPageArray = location.pathname.split('/'),
    //this is the url of the page to be loaded 
    newPage = newPageArray[newPageArray.length - 1];
  if( !isAnimating ) changePage(newPage);
});