左右跑马灯动画

实时动画.jpg

实现代码：（需要按照自己的需求修改相应样式呦~）

<template>
    <div class="box">
        <div class="list" @mouseenter="stopAn" @mouseleave="leaveAn">
            <ul ref="ulList">
                <li>实时播报：</li>
                <li v-for="(item,i) in dataArr" :key="i">
                    <span class="name">{{item.name}}</span>
                    <span class="num">{{item.value}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    prop: {
        // dataArr: {
        //     type: Array,
        //     default: () => {[]}
        // }
    },
    data() {
        return {
            dataArr: [
                {
                    name:'第一条数据',
                    value: 30
                },
                {
                    name:'第二条数据',
                    value: 30
                },
                {
                    name:'第三条数据',
                    value: 30
                }
            ]
        }
    },
    watch: {
        dataArr: {
            handler(newVal) {
                this.dataArr = newVal
                this.$nextTick(() => {
                    this.ulWidth(this.dataArr)
                })
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        // this.ulWidth(this.dataArr)
    },
    methods: {
        // 动态计算ul宽、动画时间
        ulWidth(data) {
            var n = data.length
            this.$refs.ulList.style.width = (n * 200 + 150) + 'px'
            let t = parseInt((n * 200 + 150)/100) + 's'
            this.$refs.ulList.style.animation = t + 'move infinite linear'
        },
        // 接着动画
        leaveAn() {
            this.$refs.ulList.style.animationPlayState = "running"
        },
        // 暂停动画
        stopAn() {
            this.$refs.ulList.style.animationPlayState = "paused"
        }
    }
}
</script>
<style lang='scss' scoped>
.box {
    border: 1px solid #ccc;
    padding: 1px 15px;
}
.list {
    width: 500px;
    overflow: hidden;
    ul {
        animation: 10s move infinite linear;//动画开始
        // width: 950px;
        height: 60px;
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            line-height: 60px;
            padding: 0 14px;
            box-sizing: border-box;
            float: left;
            .name {
                font-size: 14px;
                width: 194px;
                overflow: hidden;
                text-overflow: hidden;
                word-break: keep-all;//名称超出不换行，隐藏
                white-space: nowrap; /* 不换行 */
            }
        }
    }

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

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