console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跟进列表</title>
    <style>
        .pic {
            width: 97%;
            height: 120px;
            margin: 20px 5px;
            border-radius: 8px;
            background: #CAE5E8;
        }
        .item {
            margin: 5px;
            padding: 0px;
            overflow: hidden;
        }
        .item div {
            display: inline;
            float: left;
        }
        .flex {
            display: flex;
            justify-content: space-between
        }
        .card {
            width: 65px;
            height: 65px;
            margin: 15px 12px;
            margin-top: 0px;
            border-radius: 8px;
            background: #CAE5E8;
        }
        .item::after {
            content: "";
            clear: both;
            display: block;
        }
        .square {
            width: 20%;
            height: 75px;
            background: #CAE5E8;
            border-radius: 8px;
        }
        .content {
            width: 79%;
        }
        .content div {
            margin: 15px;
            margin-top: 0px;
            padding: 0px;
            width: 95%;
            border-radius: 8px;
            line-height: 30px;
            background: #99D1D3;
        }
        .content div:last-child {
            width: 65%;
            background: #CAE5E8;
        }
        @keyframes one-in {
            from {
                padding-top: 100px;
                height: 0%;
            }
            to {
                padding-top: 0px;
                height: 100%;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="pic"></div>
        <div class="flex">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <transition-group
            name="more"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
        >
            <div class="item" v-for="item in arr" v-if="show3" v-bind:data-index="item" v-bind:key="item">
                <div class="square"></div>
                <div class="content">
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                </div>
            </div>
        </transition-group>

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                show1: false,
                show2: false,
                show3: false,
                arr: [1, 2, 3, 4, 5, 6, 7, 8]
            },
            methods: {
                beforeEnter (el) {
                    el.style.opacity = 0
                },
                enter (el, done) {
                    // console.log(el.dataset.index)
                    let delay = el.dataset.index * 100
                    setTimeout(()=>{
                        el.style.transition = 'opacity 0.4s '
                        el.style.opacity = 1
                        el.style.animation = 'one-in 0.4s infinite'
                        el.style['animation-iteration-count'] = 1
                        done()
                    }, delay)
                }
            },
            mounted () {
                setTimeout(()=>{
                    this.show1 = !this.show1
                    this.show2 = !this.show2
                    this.show3 = !this.show3
                })
            }
        })
    </script>
</body>

</html>