ajax生成的页面调用css,jQuery和CSS3通过AJAX调用切换页面过渡动画特效

这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史。

制作方法

HTML结构

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

Page Transition

CSS样式

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

元素上添加.page-is-changing class)。

下面的图片演示了这个过程：

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元素，并具有相同的背景色，然后在

被添加.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);

//...

}

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

function loadNewContent(url, bool) {

var newSectionName = 'cd-'+url.replace('.html', ''),

section = $('

section.load(url+' .cd-main-content > *', function(event){

// load new content and replace 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);

});

关于popstate事件和浏览器是如何处理它的，你可以在这里获得更多的信息。