漂亮的页面过渡动画源码

▼

简介：

通过点击页面侧边菜单，对应的页面加载时伴随着滑动过渡动画，还带进度条效果的。

当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。

HTML：

HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的。

CSS：

我们将.cd-side-navigation固定在页面左侧，并且设置它的高度为100%，这样左侧导航菜单就始终占据左侧边栏，右侧主体内容滚动时，左侧导航菜单不动。

JavaScript：

当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数：loadNewContent()。

当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中，然后load()新的url内容。

通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。

图片：

▼

   特别声明    本页内容仅供参考，若有侵权，请联系我们删除。