基于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）; }// ... }）; }）; }

通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。