基于javascript实现漂亮的页面过渡动画效果附源码下载
用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。
HTML
HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的。
<navclass="cd-side-navigation"> <ul> <li> <ahref="index.html"class="selected"data-menu="index"> <svg><!--svgcontenthere--></svg> Intro </a> </li> <li> <!--...--> </li> <!--otherlistitemshere--> </ul> </nav><!--.cd-dashboard--> <mainclass="cd-main"> <sectionclass="cd-sectionindexvisible"> <header> <divclass="cd-title"> <h2>AnimatedPageTransition#2</h2> <span>Sometexthere</span> </div> <ahref="#index-content"class="cd-scroll">ScrollDown</a> </header> <divclass="cd-content"id="index-content"> <!--contenthere--> </div><!--.cd-content--> </section><!--.cd-section--> </main><!--.cd-main--> <divid="cd-loading-bar"data-scale="1"class="index"></div><!--lateralloadingbar-->
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-navigationul{
height:100%;
overflow-y:auto;
}
.cd-side-navigation::before{
/*backgroundcolorofthesidenavigation*/
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:calc(100%-4px);
background-color:#131519;
}
.cd-side-navigationli{
width:calc(100%-4px);
}
.cd-side-navigationa{
display:block;
position:relative;
}
.cd-side-navigationa::after{
/*4pxlinetotherightoftheitem-visibleonhover*/
content:'';
position:absolute;
top:0;
right:-4px;
height:100%;
width:4px;
background-color:#83b0b9;
opacity:0;
}
.no-touch.cd-side-navigationa:hover::after{
opacity:1;
}
JavaScript
当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数：loadNewContent()。
functionloadingBarAnimation(){
varscaleMax=loadingBar.data('scale');
if(scaleY+1<scaleMax){
newScaleValue=scaleY+1;
}
//...
loadingBar.velocity({
scaleY:newScaleValue
},100,loadingBarAnimation);
}
当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中，然后load()新的url内容。
functionloadNewContent(newSection){
varsection=$('<sectionclass="cd-sectionoverflow-hidden'+newSection+'"></section>').appendTo(mainContent);
//loadthenewcontentfromtheproperhtmlfile
section.load(newSection+'.html.cd-section>*',function(event){
loadingBar.velocity({
scaleY:scaleMax//thisisthescaleYvaluetocovertheentirewindowheight(100%loaded)
},400,function(){
section.addClass('visible');
varurl=newSection+'.html';
if(url!=window.location){
//addthenewpagetothewindow.history
window.history.pushState({path:url},'',url);
}
//...
});
});
}
通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。