<template>
<div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation">
<!-- 旋方块 -->
<div class="box" :class="{ 'rotate-hor-top': 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 == false){
isAnimating.value = true
}else{
isAnimating.value = false
}
}, 500)
})
