利用history实现无刷新跳转界面

@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);}to{-webkit-transform:translateX(50%);}}
@-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);}to{-webkit-transform:translateX(0px);}}
@-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);}to{-webkit-transform:translateX(-50%);}}
@-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);}to{-webkit-transform:translateX(0px);}}

.slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;}
.slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;}
.sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;}
.sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;}
.animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
.animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;background-color:#f5f5f5}

*{
	padding: 0;
	margin: 0;
}
.none {
	display: none;
}
div {
  position: absolute;
  height: 100%;
  width: 100%;
  color: #fff;
}
div span {
	display: block;
	font-size: 6.5em;
	text-align: center;
}
div p {
	font-size: 1.2em;
}
button {
  position: absolute;
  height: 40px;
  width: 100px;
  border-radius: 6px;
  background: #fff;
  bottom: 50px;
  border: 0;
}
button.back {
  left: 20px;
}
button.forward {
	right: 20px;
}
.a {
background: #19a39e;
}

.b{
background: rgb(245, 81, 81);
}
.c{
background: rgb(71, 142, 30);
}

//首先给history添加一条记录，使得第一个界面和后来的界面看起来是永远的以page=x结尾
window.history.pushState({info:‘a‘}, ‘Page‘, ‘?page=a‘);
//数据源
var source = [
	{cls:‘a‘, url:‘?page=a‘},
	{cls:‘b‘, url:‘?page=b‘},
	{cls:‘c‘, url:‘?page=c‘}
],
//数据源的下表，
k = 0,
//界面涨势的属性列表
index = [‘a‘, ‘b‘, ‘c‘],
//记录每个界面跳转的顺序的列表
stoage = [];    

//绑定按钮的tap事件，我们在移动端做测试，用的是tap，zepto会帮我们转译该事件
$(‘.forward‘).on(‘tap‘, function(){
	if(source[k]) {
		//取下一个界面的数据源
		var m = source[++k];
		//在这里填充history记录，pushstate是方法是不会引起界面刷新的，但是却会改变浏览器的回退/前进行为，执行这一步的时候可以看到地址栏中的url变化了。
		window.history.pushState({info:m.cls}, ‘Page‘, m.url);
		//储存该节目名称到stoage列表中
		stoage.push(window.history.state.info);
		//下面是切换的动画，因为这里力求简单做的是一直向前走的动作，所以动画是从右到左的切换顺序
		$(‘.‘ + m.cls).removeClass(‘none‘).addClass("animatestart sliderightin");
		setTimeout(function(){ //动画结束时重置class
            $(‘.‘+ source[k -1].cls).addClass(‘none‘);
            $(‘.‘ + m.cls).removeClass(‘animatestart sliderightin‘);
        }, 350); 
	}
})

//利用stoage的存储和index列表中的先后规则，放回动画翻转顺，是从左到右，还是从右到左
function j() {
	var l = stoage.length;
	if(index.indexOf(stoage[l-2]) < index.indexOf(stoage[l-1])) {
		return ‘animatestart sliderightin‘;
	}else{
		return ‘animatestart slideleftin‘;
	}
}
//开始监听浏览器的前进/后退行为
$(window).on(‘popstate‘, function(state) {
	//移除按钮
	$(‘.forward‘).remove();
	//将本界面名称存入stoage列表中
	stoage.push(window.history.state.info);
	//取得上一个界面的名称
	var thiscls = stoage[stoage.length - 2];
	//取得当前界面的名称
	var nextcls = stoage[stoage.length - 1];
	//对比两个界面获得动画效果
	var cls = j();
	//执行动画效果
	$(‘.‘ + nextcls).removeClass(‘none‘).addClass(cls);
		setTimeout(function(){ //动画结束时重置clas
            $(‘.‘+ thiscls).addClass(‘none‘);
            $(‘.‘ + nextcls).removeClass(cls);
        }, 350); 

});