HTML结构
该页面使用一个元素作为页面的包装元素，切换特殊效果的HTML结构。div.cd-cover-layer是用来做面膜层页面切换。div.cd-loading-bar是加载进度条当Ajax加载。
网页过渡
css样式
本页面切换效果使用身体：：前体：：伪元素创建两个掩模层覆盖在页面切换网页内容后，他们的位置是固定的位置，高度等于50vh，宽度为100%。默认情况下，CSS变换属性用于隐藏（translatey（- 100%） / translatey（100%））。当用户切换页面，这些元素在视口后移（在the.page-is-changing元素添加类）。
下面的图片显示了这个过程：
页面切换效果
身体：：
这些都是2个半块，在动画触发后覆盖内容。
身高：50vh；
宽度：100%；
位置：固定；
左：0；
}
主体：：{
顶部：0；
translatey变换：（100%）；
}
主体：{
底部：0；
translatey变换：（100%）；
}
正文：页面正在更改：：之后，正文。页面正在更改：：{
translatey变换：（0）；
}
当页面切换，消失在页面内容的影响是通过改变该div.cd-cover-layer.it透明覆盖the.cd-main-content元实现并具有相同的背景颜色，然后改变透明度从0到1时the.page-is-changing添加类。
加载进度条用。CD加载杆：：在伪元素，默认情况下它是减少（scaleX（0））和变换原点：离开中心。当页面切换的开始，它是用来放大原始尺寸使用scaleX（1）。
{光盘加载条
这是一个从一个可见页面切换到下一个页面的加载条。
位置：固定；
身高：2px；
宽度：90%；
}
cd加载条：：{
这是加载条中的进度条。
位置：绝对；
左：0；
顶部：0；
身高：100%；
宽度：100%；
变换：scaleX（0）；
转换原点：左中心；
}
页面正在变化。CD加载条：：{
变换：scaleX（1）；
}
特殊效果的平滑过渡效果通过CSS转换实现，每个动画元素被添加到不同的转换延迟中，以实现不同的动画元素序列。
Javaｓｃｒｉｐｔ
本页面切换效果使用数据类型为网页过渡属性的链接页面的切换触发事件。当插件检测用户的单击事件，该changepage（）方法将被执行。
$（主要的），（点击'，' {数据类型=页面过渡
Event.preventDefault（）；
检测选定的页面
VaR NewPage =美元（这）Attr（'href）；
如果页面不是动画-触发动画
如果（！isanimating）changepage（NewPage，真的）；
}）；
该方法触发页面切换动画和加载新的内容通过loadnewcontent（）方法。
功能changepage（URL，bool）{
isanimating =真；
页面动画触发器
$（'body）。AddClass（'page-is-changing）；
…
LoadNewContent（URL，布尔）；
…
}
当新的内容被加载，它将取代原有的element.the.page-is-changing课的内容是从人体取出，和新加载的内容将被添加到window.history（使用pushstate（）方法）。
功能loadnewcontent（URL，bool）{
无功newsectionname = 'cd -+ url.replace（.html、），
节= $（'）；
section.load（URL。CD的主要内容> *功能（事件）{
加载新内容并用新内容替换内容
$（主的）Html（段）；
…
$（'body）。RemoveClass（'page-is-changing）；
…
如果（URL）！=窗口位置）{
/ /添加新的页面到window.history
window.history.pushstate（{ }：URL路径，，URL）；
}
}）；
}
为了触发相同的页面切换动画效果，当用户点击浏览器的返回按钮，这popstate事件是在插件的监控，和changepage（）函数执行时触发。
$（窗口），（'popstate功能（））{
var = location.pathname.split（newpagearray），
这是要加载的页面的URL。
NewPage = newpagearray { 1 } newpagearray.length；
如果（！isanimating）changepage（页）；
}）；
