jQuery实现切换页面过渡动画效果


Posted in Javascript onOctober 29, 2015

直接为大家介绍制作过程,希望大家可以喜欢。

HTML结构

该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条。

<main>
 <div class="cd-index cd-main-content">
  <div>
   <h1>Page Transition</h1>
   <!-- your content here -->
  </div>
 </div>
</main>
 
<div class="cd-cover-layer"></div> <!-- this is the cover layer -->
 
<div class="cd-loading-bar"></div> <!-- this is the loading bar -->

 CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位,高度等于50vh,宽度为100%。默认情况下,使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候,这些元素被移动回视口当中(通过在<body>元素上添加.page-is-changing class)。
下面的图片演示了这个过程:

jQuery实现切换页面过渡动画效果

页面切换特效

body::after, body::before {
 /* these are the 2 half blocks which cover the content once the animation is triggered */
 height: 50vh;
 width: 100%;
 position: fixed;
 left: 0;
}
body::before {
 top: 0;
 transform: translateY(-100%);
}
body::after {
 bottom: 0;
 transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
 transform: translateY(0);
}

页面切换时,页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素,并具有相同的背景色,然后在<body>被添加.page-is-changing class的时候,将透明度从0修改为1。
Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小(scaleX(0))和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

.cd-loading-bar {
 /* this is the loading bar - visible while switching from one page to the following one */
 position: fixed;
 height: 2px;
 width: 90%;
}
.cd-loading-bar::before {
 /* this is the progress bar inside the loading bar */
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 transform: scaleX(0);
 transform-origin: left center;
}
.page-is-changing .cd-loading-bar::before {
 transform: scaleX(1);
}

特效中平滑的过渡效果使用CSS Transitions来实现。每一个动画元素都被添加了不同的transition-delay,以实现不同的元素动画顺序。
 JAVASCRIPT

该页面切换特效中在链接上使用data-type="page-transition"属性,用于触发页面切换事件。当插件检测到用户点击事件,changePage()方法将被执行。

$('main').on('click', '[data-type="page-transition"]', function(event){
  event.preventDefault();
  //detect which page has been selected
  var newPage = $(this).attr('href');
  //if the page is not animating - trigger animation
  if( !isAnimating ) changePage(newPage, true);
});

这个方法会触发页面切换动画,并通过loadNewContent()方法加载新内容。

function changePage(url, bool) {
  isAnimating = true;
  // trigger page animation
  $('body').addClass('page-is-changing');
  //...
  loadNewContent(url, bool);
  //...
}

当新的内容被加载后,会替代原来<main>元素中的内容。.page-is-changing class被从body中移除,新加载的内容会被添加到window.history中(使用pushState()方法)。

function loadNewContent(url, bool) {
  var newSectionName = 'cd-'+url.replace('.html', ''),
   section = $('<div class="cd-main-content '+newSectionName+'"></div>');
    
  section.load(url+' .cd-main-content > *', function(event){
   // load new content and replace <main> content with the new one
    $('main').html(section);
    //...
    $('body').removeClass('page-is-changing');
    //...
 
    if(url != window.location){
     //add the new page to the window.history
     window.history.pushState({path: url},'',url);
    }
 });
}

为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果,插件中监听popstate事件,并在它触发时执行changePage()函数。

$(window).on('popstate', function() {
  var newPageArray = location.pathname.split('/'),
    //this is the url of the page to be loaded 
    newPage = newPageArray[newPageArray.length - 1];
  if( !isAnimating ) changePage(newPage);
});
Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
异步JS框架的作用以及实现方法
Oct 29 #Javascript
图解JavaScript中的this关键字
May 28 #Javascript
jquery validate demo 基础
Oct 29 #Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 #Javascript
jquery实现的伪分页效果代码
Oct 29 #Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 #Javascript
You might like
php实现mysql事务处理的方法
2014/12/25 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
javascript 写类方式之十
2009/07/05 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
js获取ip和地区
2017/03/10 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
python基础知识小结之集合
2015/11/25 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
tensorflow获取变量维度信息
2018/03/10 Python
python中的for循环
2018/09/28 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python动态文本进度条的实例代码
2020/01/22 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
本科生个人求职自荐信
2013/09/26 职场文书
护理专业毕业生自我鉴定
2013/10/08 职场文书
初中美术教学反思
2014/01/29 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis