我使用的vue框架。
这个组件写出来是为了写一个用js控制的二级旋转导航栏，但是我写完收回这部分的时候却出现了问题。
在我上一个setTimeout还没结束的时候就把鼠标离开的话，就会出现，上一个setTimeout还没把所有的li展开，鼠标离开所建立的setTimeout就已经把上面的收回去了，导致下面的li标签还在，上面的已经空了。
也写了其他的一些方法，但问题都差不多。
现在就是想知道应该怎么把这个问题解决
自学的js，经历过的东西不多，如果大佬要喷请轻点。
index.vue
<RotatingMenu
box="box"
ulid="ul"
entercss="transform:rotateY(0deg);opacity:1;height:30px;"
leavecss="transform:rotateY(90deg) rotateX(-30deg) rotateZ(45deg);opacity:0;height:0;"
></RotatingMenu>
RotatingMenu.vue
<template>
<div class="RotatingMenu p_box" :class="box">
<p @mouseenter="click('.'+ulid,'enter',entercss)" @mouseleave="click('.UL1','leave',leavecss)" >animation:{{message}}
<ul class="UL1" :class="ulid" ref="ul">
<li ref="li" v-for='it in list'>
<span>{{it.title}}</span>
</li>
</ul></p>
</div>
</template>
data（）--
message:'动画',
list:[
{title:'第一个'},{title:'第二个'},{title:'第三个'},{title:'第四个'},{title:'第五个'},{title:'第六个'},
{title:'第七个'},{title:'第八个'},{title:'第九个'},{title:'第十个'},{title:'第十一个'},{title:'第十二个'},
],
函数--：
click(cl,el,en,le){
console.log(cl)
var ali = document.querySelectorAll(cl+" li");//拼接选择的样式
var aList = Array;
aList = ali;
let csslist ;
if(el==='enter'){//鼠标进入时展开
csslist = en;
for(let i in this.list){
let ai = parseInt(i);
let time = setTimeout(function(){
aList[ai].style.cssText = csslist;
},200*i)
}
}else if(el==='leave'){//鼠标离开时收回
csslist = le;
for(let i in this.list){
let ai = parseInt(i);
let unai = parseInt(-(i-this.list.length+1));
// console.log(unai)
let time = setTimeout(function(){
aList[unai].style.cssText = csslist;
},200*i)
}
}else{console.log("数据错了。")}
console.log("csslist:"+csslist)
},
样式---：（用了scss）
.p_box{
position: relative;
color: white;
p{
margin-left: 10px;
width: 150px;
height: 150px;
background-color:#1670F0;
ul{
position: absolute;
top: 100%;
li{
background-color: blue;
transition: all 1s;
opacity:0;
height: 0;
width: 150px;
}
}
}
}
