注册登录

漂亮的页面过渡动画

通过点击页面侧边菜单，对应的页面加载时伴随着滑动过渡动画，还带进度条效果的。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。

漂亮的页面过渡动画

查看演示 下载源码

HTML

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

<nav class="cd-side-navigation">
	<ul>
		<li>
			<a href="https://zhishitu.com" class="selected" data-menu="index">
				<svg><!-- svg content here --></svg>
				Intro
			</a>
		</li>
 
		<li>
			<!-- ... -->
		</li>
 
		<!-- other list items here -->
	</ul>
</nav> <!-- .cd-dashboard -->
 
<main class="cd-main">
	<section class="cd-section index visible">
		<header>
			<div class="cd-title">
				<h2>Animated Page Transition #2</h2>
				<span>Some text here</span>
			</div>
			
			<a href="https://zhishitu.com" class="cd-scroll">Scroll Down</a>
		</header>
 
		<div class="cd-content" id="index-content">
			<!-- content here -->
		</div> <!-- .cd-content -->
	</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
 
<div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar -->
知识兔

CSS

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

.cd-side-navigation {
 position: fixed;
 z-index: 3;
 top: 0;
 left: 0;
 height: 100vh;
 width: 94px;
 overflow: hidden;
}
.cd-side-navigation ul {
 height: 100%;
 overflow-y: auto;
}
.cd-side-navigation::before {
 /* background color of the side navigation */
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: calc(100% - 4px);
 background-color: #131519;
}
.cd-side-navigation li {
 width: calc(100% - 4px);
}
.cd-side-navigation a {
 display: block;
 position: relative;
}
.cd-side-navigation a::after {
 /* 4px line to the right of the item - visible on hover */
 content: '';
 position: absolute;
 top: 0;
 right: -4px;
 height: 100%;
 width: 4px;
 background-color: #83b0b9;
 opacity: 0;
}
.no-touch .cd-side-navigation a:hover::after {
 opacity: 1;
}
知识兔

JavaScript

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

function loadingBarAnimation() {
	var scaleMax = loadingBar.data('scale');
	if( scaleY + 1 < scaleMax) {
		newScaleValue = scaleY + 1;
	} 
	// ...
	
	loadingBar.velocity({
		scaleY: newScaleValue
	}, 100, loadingBarAnimation);
}
知识兔

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

function loadNewContent(newSection) {
	var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
	
	//load the new content from the proper html file
	section.load(newSection+'.html .cd-section > *', function(event){
		
		loadingBar.velocity({
			scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)
		}, 400, function(){
			
			section.addClass('visible');
 
			var url = newSection+'.html';
 
			if(url!=window.location){
		        //add the new page to the window.history
		        window.history.pushState({path: url},'',url);
		    }
 
		    // ...
		});
	});
}
知识兔

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

计算机