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

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

上代码：

html:

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";
},