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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
js中的string.format函数代码
2020/08/11 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python实现文件快照加密保护的方法
2015/06/30 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
wxPython实现文本框基础组件
2019/11/18 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
班班通校本培训方案
2014/03/12 职场文书
海飞丝的广告词
2014/03/20 职场文书
党支部考察意见范文
2015/06/02 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书