这是一款非常时尚的jQueryCSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计,在点击了某个菜单项之后,侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后,相应的页面从左向右平滑的滑出。

制作方法

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()方法来触发它。