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 相关文章推荐
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
理解javascript async的用法
Aug 22 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
javascript头像上传代码实例
Sep 28 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
Vue的Options用法说明
Aug 14 Javascript
js闭包的9个使用场景
Dec 29 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python 调用c语言函数的方法
2017/09/29 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
交通事故赔偿协议书范本
2014/04/15 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
学习党代会心得体会
2014/09/05 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
5道关于python基础 while循环练习题
2021/11/27 Python