夏日博客

A-A+

jquery实现漂亮的页面过渡动画效果

2016年01月13日 前端设计 评论 1 条 阅读 8 views 次

页面过渡在许多的应用中我们会用到如点击下拉弹出菜单时或打开新的页面时或切换左边菜单时都会用到页面过渡效果了，下面一起来看一个页面过渡的js代码。

通过点击页面侧边菜单，对应的页面加载时伴随着滑动过渡动画，还带进度条效果的。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。

js页面过度效果

HTML

HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的,代码如下:

  1. <nav class="cd-side-navigation">   
  2.     <ul>   
  3.         <li>   
  4.             <a href="index.html" class="selected" data-menu="index">   
  5.                 <svg><!-- svg content here --></svg>   
  6.                 Intro   
  7.             </a>   
  8.         </li>   
  9.     
  10.         <li>   
  11.             <!-- ... -->   
  12.         </li>   
  13.     
  14.         <!-- other list items here -->   
  15.     </ul>   
  16. </nav> <!-- .cd-dashboard -->   
  17.     
  18. <main class="cd-main">   
  19.     <section class="cd-section index visible">   
  20.         <header>   
  21.             <div class="cd-title">   
  22.                 <h2>Animated Page Transition #2</h2>   
  23.                 <span>Some text here</span>   
  24.             </div>   
  25.                
  26.             <a href="#index-content" class="cd-scroll">Scroll Down</a>   
  27.         </header>   
  28.     
  29.         <div class="cd-content" id="index-content">   
  30.             <!-- content here -->   
  31.         </div> <!-- .cd-content -->   
  32.     </section> <!-- .cd-section -->   
  33. </main> <!-- .cd-main -->  
  34. <div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar -->   

CSS

我们将.cd-side-navigation固定在页面左侧，并且设置它的高度为100%，这样左侧导航菜单就始终占据左侧边栏，右侧主体内容滚动时，左侧导航菜单不动,代码如下:

  1. .cd-side-navigation {   
  2.  position: fixed;   
  3.  z-index: 3;   
  4.  top: 0;   
  5.  left: 0;   
  6.  height: 100vh;   
  7.  width: 94px;   
  8.  overflow: hidden;   
  9. }   
  10. .cd-side-navigation ul {   
  11.  height: 100%;   
  12.  overflow-y: auto;   
  13. }   
  14. .cd-side-navigation::before {   
  15.  /* background color of the side navigation */   
  16.  content: '';   
  17.  position: absolute;   
  18.  top: 0;   
  19.  left: 0;   
  20.  height: 100%;   
  21.  width: calc(100% - 4px);   
  22.  background-color: #131519;   
  23. }   
  24. .cd-side-navigation li {   
  25.  width: calc(100% - 4px);   
  26. }   
  27. .cd-side-navigation a {   
  28.  display: block;   
  29.  position: relative;   
  30. }   
  31. .cd-side-navigation a::after {   
  32.  /* 4px line to the right of the item - visible on hover */   
  33.  content: '';   
  34.  position: absolute;   
  35.  top: 0;   
  36.  rightright: -4px;   
  37.  height: 100%;   
  38.  width: 4px;   
  39.  background-color: #83b0b9;   
  40.  opacity: 0;   
  41. }   
  42. .no-touch .cd-side-navigation a:hover::after {   
  43.  opacity: 1;   
  44. }   

JavaScript

当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数:loadNewContent(),代码如下:

  1. function loadingBarAnimation() {   
  2.     var scaleMax = loadingBar.data('scale');   
  3.     if( scaleY + 1 < scaleMax) {   
  4.         newScaleValue = scaleY + 1;   
  5.     }    
  6.     // ...   
  7.        
  8.     loadingBar.velocity({   
  9.         scaleY: newScaleValue   
  10.     }, 100, loadingBarAnimation);   
  11. }   

当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中,然后load()新的url内容,代码如下:

  1. function loadNewContent(newSection) {   
  2.     var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);   
  3.        
  4.     //load the new content from the proper html file   
  5.     section.load(newSection+'.html .cd-section > *', function(event){   
  6.            
  7.         loadingBar.velocity({   
  8.             scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)   
  9.         }, 400, function(){   
  10.                
  11.             section.addClass('visible');   
  12.     
  13.             var url = newSection+'.html';   
  14.     
  15.             if(url!=window.location){   
  16.                 //add the new page to the window.history   
  17.                 window.history.pushState({path: url},'',url);   
  18.             }   
  19.     
  20.             // ...   
  21.         });   
  22.     });   
  23. }  

通过异步加载的页面要返回上一页历史浏览记录的话,可以点击浏览器上的返回即可,返回上一页同样有过渡动画效果.

标签：

1 条留言  访客：1 条  博主：0 条

  1. 握兰网 2018年01月03日 下午 10:02  -199楼  回复

    无图无真相啊 博主

给我留言