前端入坑纪 26
工作中遇到个如题的效果，请原谅我拙劣的描述文字，实在是词穷啊！好比每次做东西时给他们命名一样，真的是神奇的体验。
图内文字，纯属测试，如有雷同，请勿当真
OK，first things first！项目链接
PS：这个touch事件，小伙伴们还是用chrome模拟手机端去看吧，Runjs里只能看到点删除时的效果
HTML 结构
<ul class="adrlisWrp">
<li>
<a href="javascript:;" class="clear">
<span>新增地址</span>
</a>
</li>
<li class="adrsLi">
<p class=" clear">
<span>鸿丙</span><strong>89898899888</strong>
</p>
<p>
银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
</p>
<a class="dlt" href="javascript:;">删除</a>
</li>
<li class="adrsLi">
<p class=" clear">
<span>鸿丙</span><strong>89898899888</strong>
</p>
<p>
银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
</p>
<a class="dlt" href="javascript:;">删除</a>
</li>
<li class="adrsLi">
<p class=" clear">
<span>鸿丙</span><strong>89898899888</strong>
</p>
<p>
银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
</p>
<a class="dlt" href="javascript:;">删除</a>
</li>
<li class="adrsLi">
<p class=" clear">
<span>鸿丙</span><strong>89898899888</strong>
</p>
<p>
银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
</p>
<a class="dlt" href="javascript:;">删除</a>
</li>
<li class="adrsLi active">
<p class=" clear">
<span>鸿丙</span><strong>89898899888</strong>
</p>
<p>
银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
</p>
<a class="dlt" href="javascript:;">删除</a>
</li>
</ul>
就是一个ul，里面放了该放的元素，没啥特殊。然后那个删除的按钮是绝对定位到li的末端（也就是屏幕外）。
CSS结构
body {
padding: 0;
margin: 0;
background-color: #F4F4F4;
}
p {
padding: 0;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.clear::after {
display: block;
content: "";
clear: both;
}
.adrlisWrp {
overflow: hidden;
}
.adrlisWrp a {
text-decoration: none;
display: block;
padding: 0 4%;
font-size: 13px;
color: #525252;
}
.adrlisWrp li {
line-height: 53px;
background-color: #fff;
margin: 3px 0;
box-sizing: border-box
}
.adrlisWrp img.arr {
float: right;
width: 12px;
margin-top: 20px;
}
.adrlisWrp img.logo {
width: 19px;
position: relative;
top: -2px;
margin-right: 3px;
vertical-align: middle
}
.adrsLi {
position: relative;
box-sizing: border-box;
font-size: 13px;
padding: 2% 4%;
transition: all .5s ease-out;
}
.adrsLi.active {
transform: translateX(-60px)
}
.adrsLi p {
line-height: 16px;
color: #525252;
}
.adrsLi p.clear {
height: 30px;
}
.adrsLi p.clear span {
left: 4%;
position: absolute;
display: block;
}
.adrsLi p.clear strong {
position: absolute;
right: 4%;
color: #222;
display: block;
letter-spacing: 1px;
}
.adrsLi>a.dlt {
display: block;
box-sizing: border-box;
width: 60px;
position: absolute;
right: -60px;
top: 0;
color: #fff;
font-size: 13px;
text-align: center;
height: 100%;
line-height: 77px;
background-color: #fcc647;
}
这里说下，电话号码和名字用绝对定位的缘由，刚开始是用左右浮动的，可是在删除了某li后，会导致该列下面的li里的电话号码和名字位置发生“神奇”的位置偏移！有谁晓得为啥吗？虚心请教有晓得的大神，多谢！
JS结构
var olis = document.getElementsByClassName("adrsLi");
var startX = endX = 0;
for (var i = 0; i < olis.length; i++) {
//touch事件开始时获得clientX值
olis[i].addEventListener("touchstart", function(ev) {
startX = ev.targetTouches[0].clientX;
}, false);
//touch事件滑动时获得clientX值
olis[i].add("touchmove", function(ev) {
endX = ev.targetTouches[0].clientX;
}, false);
//touch事件结束时计算滑动的距离
olis[i].addEventListener("touchend", function(ev) {
if (startX - endX > 0) {
//判定是往左边滑动，就加active，显示出删除的按钮
this.className = "adrsLi active";
} else {
//这里自然是右边滑动，就去active，隐藏删除的按钮
this.className = "adrsLi";
}
}, false);
//点击删除按钮变换translateX(-999px)，这样出现动画效果了
olis[i].getElementsByTagName("a")[0].onclick = function() {
var thisLi = this.parentNode;
thisLi.style.cssText = "transform:translateX(-999px)";
//700ms后给删除的li变为0个高
setTimeout(function() {
thisLi.style.cssText = "transform:translateX(-999px);height:0;padding:0;margin:0";
}, 700);
}
}
差点忘记这里有个坑，需要说明下。在使用touch事件监听时，chrome里要用addEventListener ，不然模拟后的touch事件是不会生效的。js这块已添加注释，有兴趣的小伙伴可以浏览下并实践下，加油！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
