css滑动动画
先看效果，用谷歌或火狐，你懂的》传送门《
简易的滑动，做起来只要几句话而已。
让我们先来看看HTML骨架是个什么样子。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>split</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<button id="homebutton">home</button>
<button id="hallbutton">hall</button>
<button id="userbutton">user</button>
</div>
<div id="homepage" class="page first">this is home</div>
<div id="hallpage" class="page other">this is hall</div>
<div id="userpage" class="page other">this is user</div>
<script src="jquery-2.0.0.js"></script>
<script src="index.js"></script>
</body>
</html>
为了方便解释，我把CSS, HTML, JS分开了，算是个好习惯吧。
三个button是必须的。然后这三个div对应三个button。感觉这解释有点多余（==）
好了，现在我们要给HTML上样式了。
首先是给div统一大小
.page {
position: absolute;
top: 50px;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
}
据说加了这个transform: translate3d(0, 0, 0);的话会调用硬件加速，出于心理作用我加上了。宽和高设为100%这样就能整个页面跳转了（视觉上）。
然后就是做这几个页的先后顺序了。
.first {
left: 0px;
opacity: 1;
}
.other {
left: 100%;
opacity: 0;
}
展现出来的页是放在最左边的，要隐藏的就放在最右边，距离刚好是body的宽度。加个透明度，切换的时候感觉会很高级。当然这不是个好的做法，兼容性不是很好。
↓下面的这个是跨浏览器的做法。
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
现在说到重点了，就是这个东西是怎么动起来的。
.transition {
transition: all 0.5s ease-out;
}
OK，这个属性的左右就是对变化的属性进行渐变。
好了，接下来就是切换class了。
<!-- lang: js -->
var main = (function(w, d, $, undefined){
var list = _$('.page') || [];
var homebutton = _$('#homebutton');
var hallbutton = _$('#hallbutton');
var userbutton = _$('#userbutton');
homebutton.onclick = function(){
get_this_page(list, "#homepage");
};
hallbutton.onclick = function(){
get_this_page(list, "#hallpage");
};
userbutton.onclick = function(){
get_this_page(list, "#userpage");
};
homebutton.click();
function get_this_page(nodelist, string){
nodelist.forEach(function(x, i, a){
x.className = "page transition other";
});
_$(string).className = "page transition first";
return true;
}
function _$(string) {
var first_char = string.substr(0,1);
if(first_char == ".") {
var list = d.getElementsByClassName(string.substring(1));
var nodelist = [];
for (var i = list.length - 1; i >= 0; i--) {
nodelist[i] = list[i]
}
return nodelist;
} else if(first_char == "#"){
var id = string.substring(1);
return d.getElementById(id);
}
}
})(window, document, $);
其中主要的就是一个函数。
<!-- lang: js -->
function get_this_page(nodelist, string){
nodelist.forEach(function(x, i, a){
x.className = "page transition other";
});
_$(string).className = "page transition first";
return true;
}
剩下的就还凑乎吧，感觉nodelist这个东西还是蛮神奇的，谁要是有详细的资料麻烦给我个链。