这是一款非常时尚的jQuery和CSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计，在点击了某个菜单项之后，侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后，相应的页面从左向右平滑的滑出。
制作方法
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 --><!-- lateral loading bar --><div id="cd-loading-bar" data-scale="1" class="index"></div> |
CSS样式
侧边栏.cd-side-navigation使用固定定位方式，它的高度设置为100%，同时设置overflow:hidden;。并且它的子元素<ul>设置了一个overflow-y: auto属性，这样，如果侧边栏的内容比页面的高度要高，可以在内部滚动侧边栏。
为了创建在鼠标滑过菜单项时出现在右侧的线条，该特效中使用a::after伪元素来制作它。它们采用绝对定位，4像素宽，和top:0;，right:-4px;。
这里要注意的是每一个列表项元素的宽度使用calc(100%- 4px)来计算，这样可以使a::after伪元素放置在.cd-side-navigation的内部。
.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;} |
但用户选择了一个新的菜单项之后，特效中会创建一个新的.cd-section元素，并将它插入到DOM中。
默认情况下，.cd-section元素被使用translateX(-100%)移动到左侧屏幕之外。在用户点击菜单项之后，它被赋予.visible class，使它移动会屏幕之中。
.cd-section{ position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; transform: translateX(-100%); transition: transform 0s 0.5s;}.cd-section.visible { /* this is the visible/selected section */ position: relative; z-index: 2; transform: translateX(0); transition: transform 0.5s 0s;} |
JAVASCRIPT
该特效中所有的文件的HTML结构都基本相同，只是.cd-section中的内容有所不同。
当用户点击一个菜单项的时候，triggerAnimation()函数会被触发。这个函数会触发进度条动画函数loadingBarAnimation()，并通过loadNewContent()函数来加载新的内容。
对于加载进度条，特效中使用Velocity.js来制作动画效果。在进度条动画开始之前，进度条#cd-loading-bar被放置在菜单项的右侧，高度和菜单项相同。然后通过scaleY来制作进度条的动画效果。
function loadingBarAnimation() { //loadingBar is the #cd-loading-bar element //scaleY is the loadingBar actual scale value //this is the scaleY value to cover the entire window height (100% loaded) var scaleMax = loadingBar.data('scale'); if( scaleY + 1 < scaleMax) { newScaleValue = scaleY + 1; } // ... loadingBar.velocity({ scaleY: newScaleValue }, 100, loadingBarAnimation);} |
当一个新的页面被选择了之后，.cd-section元素会被创建并插入到DOM中。然后使用load()函数来加载新的内容。这里在菜单项中使用一个data-menu属性来决定要加载哪个文件。在页面被加载之后，进度条动画结束，旧的页面内容被新的页面内容替换，新的页面内容使用pushState()方法来放入到window.history中。
function loadNewContent(newSection) { //create a new section element and insert it into the DOM (newSection is the data-menu of the selected navigation item) 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(){ //add the .visible class to the new section element -> it will cover the old one 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); } // ... }); });} |
为了让用户在点击浏览器的回退按钮时得到相同的动画效果，特效中监听popstate事件，并通过triggerAnimation()方法来触发它。
