css3页面过渡整页切换侧边栏效果

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); 
            } 
  
            // ... 
        }); 
    }); 
}