css基本动画的实践 animation transition

<template>
    <!-- ref获取盒子内元素 -->
    <div class="animate" ref="animate">
        <!-- 循环渲染盒子内容 -->
        <div class="animate-item" v-for="(item, index) in arr" :key="index">
            <img :src="item.img" alt="">
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const animate = ref()
//获取ref盒子元素
onMounted(() => {
    console.log(animate, '看看这个')
    //当我们定义的i小于盒子内数组的个数时执行循环 
    for (let i = 0; i < animate.value!.children.length; i++) {
        //提前时间算法算出每一个动画的提前量
        (animate.value!.children[i]).style.animationDelay = `
            ${-7.5 - 5 * i}s,
            ${-5 * i}s,
            ${-5 * i}s
        `
    }
})
// 数组数据
const arr = ref([
    {
        img: '/src/assets/交通安全画像系统_nor.png',
        text: '交通安全画像系统',
        img_hov: '/src/assets/交通安全画像系统_hov.png',
    },
    {
        img: '/src/assets/交通态势监控系统_nor.png',
        text: '交通态势监控系统',
        img_hov: '/src/assets/交通态势监控系统_hov.png',
    },
    {
        img: '/src/assets/可视化作战平台_nor.png',
        text: '可视化作战平台',
        img_hov: '/src/assets/可视化作战平台_hov.png',
    },
    {
        img: '/src/assets/重点车辆监管系统_nor.png',
        text: '重点车辆监管系统',
        img_hov: '/src/assets/重点车辆监管系统_hov.png',
    },
    {
        img: '/src/assets/支队平台系统本地化应用_nor.png',
        text: '支队平台系统本地化应用',
        img_hov: '/src/assets/支队平台系统本地化应用_hov.png',
    },
    {
        img: '/src/assets/非机动车未带头盔识别系统_nor.png',
        text: '非机动车未带头盔识别系统',
        img_hov: '/src/assets/非机动车未带头盔识别系统_hov.png',
    }
])
</script>
<style scoped lang="scss">
//定义横向移动的动画name
@keyframes animateX {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 200px);
    }
}

//定义竖向移动的动画name
@keyframes animateY {
    0% {
        top: 0;
    }

    100% {
        top: calc(100% - 200px);
    }
}

//定义缩放内容 name
@keyframes scale {
    0% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.5);
    }
}

.animate {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: black;

    .animate-item {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        animation-name: animateX, animateY, scale;
        //动画名称
        animation-duration: 15s, 15s, 30s;
        //动画执行时间
        animation-timing-function: cubic-bezier(.36, 0, .64, 1);
        //贝塞尔曲线时间
        animation-iteration-count: infinite;
        //count次数无限执行
        animation-direction: alternate;
        //循环播放动画内容

        p {
            color: white;
            padding: 0;
            margin: 0;
        }
    }
}
</style>