左右滑动出按钮&删除效果

前端入坑纪 26

工作中遇到个如题的效果，请原谅我拙劣的描述文字，实在是词穷啊！好比每次做东西时给他们命名一样，真的是神奇的体验。

图内文字，纯属测试，如有雷同，请勿当真

OK，first things first！项目链接
PS：这个touch事件，小伙伴们还是用chrome模拟手机端去看吧，Runjs里只能看到点删除时的效果

HTML 结构

    

        

            
                ![](wrap/img/add.png)新增地址
                ![](wrap/img/goto.png)
            
        
        

            

                鸿丙89898899888
            
            

                银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
            
            删除
        
        

            

                鸿丙89898899888
            
            

                银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
            
            删除
        
        

            

                鸿丙89898899888
            
            

                银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
            
            删除
        
        

            

                鸿丙89898899888
            
            

                银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
            
            删除
        
        

            

                鸿丙89898899888
            
            

                银河系太阳星边蓝色水不规则貌似圆形的星星上 地球村 17区 21段 11号
            
            删除
        

    

就是一个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这块已添加注释，有兴趣的小伙伴可以浏览下并实践下，加油！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！