基于javaｓｃｒｉｐｔ实现漂亮的页面转换动画效果下载源代码

用户点击页面左侧的菜单，相应的页面加载一个带有进度条效果的滑动过滤动画。当然，页面加载是ajax驱动的，整个负载转换过程非常流畅，用户体验非常好。

HTML

在HTML结构，主要包含CD页面的主要内容。CD侧边导航包含导航栏，和# CD加载杆是用来做动画进度条。

简介

2 #页面过渡动画
这里的一些文字

向下滚动
CSS

我们fix.cd-side-navigation在页面的左边，其高度设置为100%，这样左侧导航菜单一直占据左边栏，和左边的导航菜单不动时，权利的主要内容是卷。
{ CD侧导航
位置：固定；
Z指数：3；
顶部：0；
左：0；
身高：100vh；
宽度：94px；
溢出：隐藏；
}
CD侧导航
身高：100%；
overflow-y：汽车；
}
CD侧导航：：{
侧导航的背景颜色
内容；
位置：绝对；
顶部：0；
左：0；
身高：100%；
宽度：钙（100% 4px）；
背景颜色：# 131519；
}
CD侧导航李{
宽度：钙（100% 4px）；
}
CD侧导航{
显示块；
职位：相对；
}
CD侧导航a：：{
4px线右边的项目/可见在盘旋。
内容；
位置：绝对的；
顶部：0；
右：- 4px；
身高：100%；
宽度：4px；
背景颜色：# 83b0b9；
不透明性：0；
}
。no-touch.cd-side-navigation：：：{盘旋后
不透明性：1；
}
Javaｓｃｒｉｐｔ

当我们点击左边的菜单，我们称triggeranimation（）函数。这个函数触发加载进度条的动画功能loadingbaranimation（），然后加载页面内容功能：loadnewcontent（）。
功能loadingbaranimation（）{
无功scalemax = loadingbar.data（规模的）；
如果（称为＋1＜scalemax）{
newscalevalue =称为+ 1；
}
…

LoadingBar.velocity（{
ScaleY：newscalevalue
}，100，loadingbaranimation）；
}
当选择新页面时，将创建一个新元素，cd部分，并插入到DOM中，然后加载（）新URL内容。
功能loadnewcontent（newsection）{
无功部分= $（）。AppendTo（内容）；

在适当的HTML文件中加载新内容
section.load（newsection +。html.cd-section > *功能（事件）{

LoadingBar.velocity（{
ScaleY：scalemax / /这是覆盖整个窗口称为价值（100%）
}，400，函数（）{（）

Section.addClass（'visible）；

var url = newsection +HTML；

如果（URL）！=窗口位置）{
/ /添加新的页面到window.history
window.history.pushstate（{ }：URL路径，，URL）；
}

…
}）；
}）；
}
如果异步加载页面返回到历史浏览记录，您可以单击浏览器的返回。返回到相同的转换动画效果。