首先放上完整代碼，后面詳細講解一下實現的原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
#wrapper .item{
border: 1px solid #ccc;
height: 30px;
margin: 5px 0
}
#content{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 100%;
background: #fee000;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div id="content"></div>
</body>
</html>
<script>
function init(){
var wrapper=document.getElementById('wrapper');
var content=document.getElementById('content');
var items=wrapper.getElementsByClassName('item');
var w=window.innerWidth;
for(var i =0;i<items.length;i++){
(function(i){
items[i].addEventListener('click',function(){
wrapper.style.display='none';
content.innerHTML=i;
content.style.transform='translate3d(-'+w+'px,0,0)';
content.style.transition='all 0.5s';
},false);
})(i);
}
content.addEventListener('click',function(){
this.innerHTML='';
this.style.transform='translate3d(0,0,0)';
this.style.transition='all 0.5s';
wrapper.style.display='block';
},false)
}
window.onload=init;
</script>
css
css方面沒什么技巧，主要是彈出層設置為fixed定位，方便動畫和自動計算寬高，left設置為100%，即相對于初始位置偏移了一個屏幕的寬度。
js
首先，獲取我們需要的dom，包括列表元素，彈窗，并保存窗口的寬度。
var wrapper=document.getElementById('wrapper');
var content=document.getElementById('content');
var items=wrapper.getElementsByClassName('item');
var w=window.innerWidth;
然后，為每一個列表項綁定點擊事件，注意這里用到了addEventListener。在循環內部，采用匿名函數傳值立即執行的方式，使得i可以被正確保存下來。每個點擊事件的回調函數里，要做的是點擊后隱藏當前列表，給content分發不同的內容。設置style為translate3d（注意負號，因為content要顯示，必須沿著x軸負向偏移），主要是開啟移動端硬件加速，使得動畫效果更加流暢。
for(var i =0;i<items.length;i++){
(function(i){
items[i].addEventListener('click',function(){
wrapper.style.display='none';
content.innerHTML=i;
content.style.transform='translate3d(-'+w+'px,0,0)';
content.style.transition='all 0.5s';
},false);
})(i);
}
最后，我給content加了一個點擊事件，點擊之后，先把content清空，再讓它做動畫原路返回，同時，設置之前的列表wrapper為block，繼續下一輪事件循環。（這里只是演示效果，實際應用中應當把關閉事件綁定到對應的按鈕上。）
content.addEventListener('click',function(){
this.innerHTML='';
this.style.transform='translate3d(0,0,0)';
this.style.transition='all 0.5s';
wrapper.style.display='block';
},false)
