前端纯css实现循环滚动展示数据，通过鼠标移入移出事件实现——鼠标移入暂停，移出继续滚动

主要是用到css的动画属性：animation ， transform；vue的@mouseenter鼠标移入事件，@mouseleave鼠标移出事件。

上代码：

html:

        <div class="list_box">
            <div id="scroll_box" ref="scroll_box" class="list anim" @mouseenter="stopAn" @mouseleave="leaveAn">
                <ul id="list1" ref="list1">
                    <li v-for="(item,i) in wranData" :key="i" :class="{bg:(i%2==0)?true:false}">
                        <template>
                            <span class="num">{{item.a}}</span>
                            <span class="num">{{item.b}}</span>
                            <span class="num">{{item.c}}</span>
                            <span class="num">{{item.d}}</span>
                            <span class="num">{{item.e}}</span>
                        </template>
                    </li>
                </ul>
                <!-注意这个ul就是上面ul的复制体哦，除了ref不一样，其他都跟上面一样哦-->
                <ul ref="list2" >
                    <li v-for="(item,i) in wranData" :key="i" :class="{bg:(i%2==0)?true:false}">
                        <template>
                            <span class="num">{{item.a}}</span>
                            <span class="num">{{item.b}}</span>
                            <span class="num">{{item.c}}</span>
                            <span class="num">{{item.d}}</span>
                            <span class="num">{{item.e}}</span>
                        </template> 
                    </li>
                </ul>
            </div>
        </div>

css:

        .list_box .anim:hover {
            cursor: pointer;
        }

        .list_box .list {
            height: 390px;
            overflow: hidden;
        }

        .list_box .list ul {
            padding: 0 5px;
        }

        .list_box .list ul li {
            color: #43475F;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
            border-top: 1px solid #E7EAEF;
            padding: 12px 0;
        }

        .list_box .list ul li:hover {
            background: rgba(126, 129, 147, 0.1);
        }

        .list_box .list ul li span {
            margin-right: 5px;
        }

        .list_box .list ul li span:last-child {
            margin-right: 0px;
        }

        .list_box .list ul .bg {
            background-color: #fff;
        }

        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, -100%);
            }
        }

因为数据需要从接口动态获取，需要在获取到数据后才能触发css动画，所以需要一丢丢的js代码：

            getData() {
                var that = this;
                $.ajax({
                    url: '',
                    data: {},
                    type: "get",
                    success: function (result) {
                        if (result.code === 0) {
                            that.wranData = result.data;
                            //滚动动画时间设置
                            that.$nextTick(() => {
                            //获取数据展示高度和实际容器高度，判断数据是否超出容器盒子
                                 that.scrollBoxHeight=document.querySelector('#scroll_box').clientHeight;
                                 that.scrollBoxUlHeight=document.querySelector('#scroll_box #list1').clientHeight;
                                //当数据的2倍超过容器的高度，添加css动画；不满足时取消动画，并且隐藏list2容器
                                if (that.scrollBoxUlHeight> that.scrollBoxHeight) {
                                    that.$refs.list1.style.animation = `${that.wranData.length}s move infinite linear`
                                    that.$refs.list2.style.animation = `${that.wranData.length}s move infinite linear`
                                }else{
                                    that.$refs.list1.style.animation='none'
                                    that.$refs.list2.style.animation='none'
                                    that.$refs.list2.style.display='none'
                                }
                            })
                        }
                    },
                })
            },

鼠标移入暂停动画，鼠标移出继续动画：

// 移出接着动画
leaveAn() {
   this.$refs.list1.style.animationPlayState = "running";
   this.$refs.list2.style.animationPlayState = "running";
},
// 移入暂停动画
stopAn() {
   this.$refs.list1.style.animationPlayState = "paused";
   this.$refs.list2.style.animationPlayState = "paused";
},