基于javascript实现漂亮的页面过渡动画效果附源码下载


Posted in Javascript onOctober 26, 2015

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

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

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

Javascript 相关文章推荐
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
JS实现的页面自定义滚动条效果
Oct 26 #Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 #Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
javascript 日期常用的方法
2009/11/11 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Django视图扩展类知识点详解
2019/10/25 Python
哪些是python中web开发框架
2020/06/17 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
团队精神演讲稿
2013/12/31 职场文书
运动会广播稿80字
2014/01/23 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
个人融资协议书
2014/10/02 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书