anime时间轴控制

<template>
    <div class="title">时间轴控制</div>
    <div class="amine-box">
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani1"></div>
        </div>
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani2"></div>
        </div>
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani3"></div>
        </div>
    </div>

    <br><br>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import anime from 'animejs'
const ani1 = ref();
const ani2 = ref();
const ani3 = ref();

const AniTimeLine = anime.timeline({
    easing: 'easeOutExpo',
    duration: 750,
    loop: true,
});;


onMounted(() => {
    AniTimeLine
        .add({
            targets: ani1.value,
            translateX: 250,
        })
        .add({
            targets: ani2.value,
            translateX: 250,
        })
        .add({
            targets: ani3.value,
            translateX: 250,
        })
});

onUnmounted(() => {
    AniTimeLine.pause();
})

</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}

.amine-box {
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
}

.line {
    width: 300px;
    height: 30px;
    margin: 0 auto 10px auto;
    position: relative;
}

.old,
.animation {
    width: 30px;
    height: 30px;
    background-color: brown;
    position: absolute;
    left: 0;
    top: 0;
}

.old {
    opacity: 0.5;
}
</style>