简单删除动画效果

前端入坑纪 24

工作不忙了，悠闲的时候，有想法也特别多。那就，双更再来一个！

HTML 结构

    <ul id="uls">
        <li class="clear">
            <p>
                秘密的甚笃
            </p>
            <a href="javascript:;">
                删除
            </a>
        </li>
        <li class="clear">
            <p>
                秘密的甚笃
            </p>
            <a href="javascript:;">
                删除
            </a>
        </li>
        <li class="clear">
            <p>
                秘密的甚笃
            </p>
            <a href="javascript:;">
                删除
            </a>
        </li>
        <li class="clear">
            <p>
                秘密的甚笃
            </p>
            <a href="javascript:;">
                删除
            </a>
        </li>
        <li class="clear">
            <p>
                秘密的甚笃
            </p>
            <a href="javascript:;">
                删除
            </a>
        </li>
    </ul>

简单的一个ul ，li 里面放了一个p和一个按钮的a，各自左右浮动

CSS 结构

        body {
            background: #fff;
        }
        
        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        img {
            border: none;
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none;
        }
        
        #uls {
            margin: 1rem;
        }
        
        #uls li {
            height: 40px;
            padding: 12px 0;
            border: 1px solid skyblue;
            color: #333;
            margin-bottom: 12px;
            border-radius: 2px;
            transition: all .7s linear;
            overflow: hidden;
        }
        
        li p {
            line-height: 40px;
            float: left;
            text-align: left;
            text-indent: 2rem;
            width: 70%;
        }
        
        li a {
            display: block;
            font-size: 13px;
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
            margin-right: 3%;
            background-color: skyblue;
            color: #fff;
            float: right;
            width: 60px;
            text-align: center;
        }
        /*动画效果 摘选自animate.css*/
        
        @-webkit-keyframes flipOutX {
            from {
                -webkit-transform: perspective(400px);
                transform: perspective(400px);
            }
            30% {
                -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
                transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
                opacity: 1;
            }
            to {
                -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
                transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
                opacity: 0;
            }
        }
        
        @keyframes flipOutX {
            from {
                -webkit-transform: perspective(400px);
                transform: perspective(400px);
            }
            30% {
                -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
                transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
                opacity: 1;
            }
            to {
                -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
                transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
                opacity: 0;
            }
        }
        
        .flipOutX {
            -webkit-animation-name: flipOutX;
            animation-name: flipOutX;
            animation-duration: .7s;
            animation-timing-function: linear;
            -webkit-animation-duration: .7s;
            animation-fill-mode: forwards;
            /*规定对象动画时间之外的状态*/
            -webkit-animation-fill-mode: forwards
        }

动画效果的css 是来源于 animate.css ， 里面有很多常用的动画效果。至于ul 和 li 的样式没什么特别奇葩的地方，就是常见的布局，就不赘述了。
PS：小伙伴反应最后删除过于生硬，所以添加了animation-fill-mode，控制动画完结后保持最后帧的效果，并且同时让li高度也过渡动画到零。这样就没有先前那么突兀的效果了！

JS 结构

        var oul = document.getElementById("uls");
        var olis = oul.getElementsByTagName("li");
        for (var i = 0; i < olis.length; i++) {
             // 给每个li里的a添加事件
            olis[i].getElementsByTagName("a")[0].onclick = function() {
                // 获取当前点击的a的父级，也就是它的爸爸li
                var theLi = this.parentNode;
               // 给这个li添加动画的class，这样就会出现动画的效果了
                theLi.className = "flipOutX";
                // 280ms后改变li的高度为0，包括边框和margin
                setTimeout(function() {
                    theLi.style.cssText = "height:0;padding:0;border-width:0;margin:0";
                }, 280);
               // 动画时间为0.7s+280ms，所以直接设置1s后触发删除li
                setTimeout(function() {
                    oul.removeChild(theLi)
                }, 1000)

            }
        }

都是比较简单的逻辑，这个效果案例比较综合，有css的动画，有js的事件，有html的浮动布局。有兴趣的小伙伴，可以研究下。

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