Jquery页面跳转动画效果
页面切换效果的HTML结构使用了
& ltmain & gt
& ltdiv class = " CD-index CD-main-content " >
& ltdiv & gt
& lth 1 & gt；页面转换& lt/h 1 & gt；
& lt！-您在这里的内容-& gt；
& lt/div & gt；
& lt/div & gt；
& lt/main & gt；
& ltdiv class="cd-cover-layer " >& lt/div & gt；& lt！-这是覆盖层-& gt；
& ltdiv class="cd-loading-bar " >& lt/div & gt；& lt！-这是装货区-& gt；？
CSS样式
在这个页面切换效果中，body::before和body::after的伪元素用于创建两个遮罩层，在页面切换时覆盖页面内容。它们的定位是固定的，高度等于50vh，宽度为100%。默认情况下，它们通过使用CSS变换属性(translate y(-100%)/translate y(100%))来隐藏。当用户切换页面时，这些元素被移回到视口中(通过在
下图演示了这一过程:
页面切换效果
body::after，body::before {
/*这是动画触发后覆盖内容的两个半块*/
身高:50vh
宽度:100%；
位置:固定；
左:0；
}
body::之前{
top:0；
transform:translate y(-100%)；
}
body::在{
底部:0；
transform:translate y(100%)；
}
body.page-is-changing::after，body.page-is-changing::before {
transform:translate y(0)；
} ?
切换页面时，通过改变div.cd-cover-layer的透明度来实现页面内容的淡化效果。它涵盖了。cd-main-content元素和具有相同的背景色，然后它显示在
加载进度条是使用。cd-loading-bar::在伪元素之前。默认情况下，它是减少的(scaleX(0))和变换-原点:左中心。当页面切换开始时，使用scaleX(1)将其放大到原始大小。
。cd加载栏{
/*这是加载栏-从一个页面切换到下一个页面时可见*/
位置:固定；
高度:2px
宽度:90%；
}
。cd-loading-bar::before {
/*这是加载栏内的进度条*/
位置:绝对；
左:0；
top:0；
身高:100%；
宽度:100%；
transform:scaleX(0)；
变换-原点:左中心；
}
。页面正在改变。cd-loading-bar::before {
transform:scaleX(1)；
} ?
特效中的平滑过渡效果是通过CSS转场实现的。每个动画元素都添加了不同的过渡延迟，以实现元素的不同动画顺序。
java描述语言
页面切换效果使用链接上的data-type="page-transition "属性来触发页面切换事件。当插件检测到用户单击事件时，将执行changePage()方法。
$('main ')。on('click '，'[data-type="page-transition"]'，function(event){
event . prevent default()；
//检测选择了哪个页面
var newPage = $(this)。attr(' href ')；
//如果页面没有动画-触发动画
如果(！isAnimating ) changePage(newPage，true)；
});
该方法将通过loadNewContent()方法触发页面切换动画和loadnewcontent。
函数更改页面(url，bool) {
isAnimating = true
//触发页面动画
$('body ')。addClass(' page-is-changing ')；
// ...
loadNewContent(url，bool)；
// ...
}
当加载新内容时，它将替换原来的内容
函数loadNewContent(url，bool) {
var new section name = ' CD-'+URL . replace('。html '，'')，
section = $(' & lt；div class = " CD-main-content '+newSectionName+' " & gt；& lt/div & gt；');
section.load(url+'。CD-main-content & gt；*，函数(事件){
//加载新内容并替换& ltmain & gt对新的满意吗
$('main ')。html(section)；
// ...
$('body ')。remove class(“page-is-changing”)；
// ...
如果(网址！= window.location){
//将新页面添加到window.history
window . history . push state({ path:URL }，''，URL)；
}
});
}
为了在用户点击浏览器的后退按钮时触发相同的页面切换动画效果，插件监听popstate事件，并在触发时执行changePage()函数。
$(窗口)。on('popstate '，函数(){
var new page array = location . pathname . split('/')，
//这是要加载的页面的url
new page = new page array[new page array . length-1]；
如果(！isAnimating)change page(new page)；
});