vue3项目实现跑马灯效果

<div class="aaa">
                <div class="box">
                    <ul ref="ulDom" @mouseenter="pause" @mouseleave="resume">
                        <li v-for="item in 2">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </li>
                    </ul>
                </div>
</div>
import { reactive, onMounted, ref } from 'vue'；
onMounted(()=>{
  animation()
})
const ulDom = ref<FormInstance>()
let animationId: any = null
let isPaused = false

const pause = () => {
    cancelAnimationFrame(animationId)
    isPaused = true
}

const resume = () => {
    if (!isPaused) return
    animationId = requestAnimationFrame(animation)
    isPaused = false
}
let position = 0
const animation = () => {
    const ulWidth = ulDom.value.offsetWidth
    const animate = () => {
        position -= 1
        if (position <= -(ulWidth / 2)) {
            position = 0
        }
        ulDom.value.style.transform = `translateX(${position}px)`
        animationId = requestAnimationFrame(animate)
    }
    animate()
}
<style>
  .aaa {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .box {
        width: 1050px;
        height: 300px;
        overflow: hidden;

        ul {
            width: 200%;
            height: 100%;

            &>li {
                width: 1050px;
                background-color: rgb(255, 255, 255);
                height: 100%;
                float: left;
                list-style: none;
                display: flex;

                &>div {
                    width: 200px;
                    height: 100%;
                    margin-right: 10px;
                }

                &>div:nth-child(1) {
                    background-color: saddlebrown;
                }

                &>div:nth-child(2) {
                    background-color: rgb(238, 254, 0);
                }

                &>div:nth-child(3) {
                    background-color: rgb(34, 255, 5);
                }

                &>div:nth-child(4) {
                    background-color: rgb(10, 194, 235);
                }

                &>div:nth-child(5) {
                    background-color: rgb(50, 9, 215);
                }
            }
        }
    }
}
</style>

效果图