CSS 中间位置翻转动画

    <template>
    	<div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation">
    		<!-- 旋方块 -->
    		<div class="box" :class="{ 'rotate-hor-center': isAnimating }">
    			<!-- 元素内容 -->
    		</div>
    	</div>
    </template>

    <script setup>
    	import {
    		onMounted,
    		ref,
    		watch,
    		onUnmounted
    	} from 'vue';

    	const isAnimating = ref(false); // 控制是否应用动画的响应式状态
    	function startAnimation() {
    		// 鼠标进入容器时，启动动画
    		isAnimating.value = true;
    	}

    	function stopAnimation() {
    		// 鼠标离开容器时，停止动画
    		isAnimating.value = false;
    	}

    	onMounted(() => {
    		setInterval(() => {

    			if (isAnimating.value == fal