用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。
HTML
HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的。
Animated Page Transition #2
Some text here
CSS
我们将.cd-side-navigation固定在页面左侧，并且设置它的高度为100%，这样左侧导航菜单就始终占据左侧边栏，右侧主体内容滚动时，左侧导航菜单不动。
JavaScript
当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数：loadNewContent()。
loadingBar.velocity({
scaleY: newScaleValue
},100,loadingBarAnimation);
}
scaleY: newScaleValue
},100,loadingBarAnimation);
}
当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中，然后load()新的url内容。
').appendTo(mainContent);
原文链接：https://www.f2er.com/js/51981.html//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);
}
// ...
}); });
}
