左右跑馬燈動畫

實時動畫.jpg

實現(xiàn)代碼：（需要按照自己的需求修改相應(yīng)樣式呦~）

<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:'第一條數(shù)據(jù)',
                    value: 30
                },
                {
                    name:'第二條數(shù)據(jù)',
                    value: 30
                },
                {
                    name:'第三條數(shù)據(jù)',
                    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: {
        // 動態(tài)計算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>