基于javascript實現漂亮的頁面過渡動畫效果附源碼下載_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:44:50

基于javascript實現漂亮的頁面過渡動畫效果附源碼下載_javascript技巧

基于javascript實現漂亮的頁面過渡動畫效果附源碼下載_javascript技巧:用戶通過點擊頁面左側的菜單，對應的頁面加載時伴隨著滑動過濾動畫，并帶有進度條效果。當然頁面的加載是Ajax驅動的，整個加載過渡過程非常流暢，非常好的用戶體驗。 HTML HTML結構中，.cd-main包含頁面主體內容，.cd-side-navigation包含著側邊導航

推薦度：

點擊下載本文 文檔為doc格式

導讀基于javascript實現漂亮的頁面過渡動畫效果附源碼下載_javascript技巧:用戶通過點擊頁面左側的菜單，對應的頁面加載時伴隨著滑動過濾動畫，并帶有進度條效果。當然頁面的加載是Ajax驅動的，整個加載過渡過程非常流暢，非常好的用戶體驗。 HTML HTML結構中，.cd-main包含頁面主體內容，.cd-side-navigation包含著側邊導航

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

HTML

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

 
 
  
 
  
 Intro 
 
  
  
 
  
 
 
 
 
  
  
 
 Animated Page Transition #2 
 Some text here 
 
 Scroll Down

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()。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com