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 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js propertychange和oninput事件
Sep 28 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
js常见遍历操作小结
Jun 06 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vuex实现购物车的增加减少移除
Jun 28 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JSON相关知识汇总
2015/07/03 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
优秀经理事迹材料
2014/02/01 职场文书
2014年路政工作总结
2014/12/10 职场文书
英文感谢信格式
2015/01/21 职场文书
安全教育主题班会教案
2015/08/12 职场文书
一年级语文教学随笔
2015/08/14 职场文书
Python3 类型标注支持操作
2021/06/02 Python