用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。当然页面的加载是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()。
function loadingbaranimation() { var scalemax = loadingbar.data('scale'); if( scaley + 1 *', 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); } // ... }); }); }
通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。