Javascript 菜单动画出现意外延迟

下面是我正在制作的菜单。出于某些原因，它有点起伏，但更令人担忧的是，在单击某个项目之后，在该项目设置动画之前，会有半秒的延迟

基本上，非活动菜单位于视口右侧（

right:-200px

）。当您单击任何项目时，它会将所有“活动”项目向左滑动20像素，并“激活”目标菜单

我认为这很简单，但我不知道是什么原因造成了延迟和波动

$（'.rmenu'）。在（'click'，'.item'，function（）上{
var targetid=$（this）.data（'target-id'）；
变量targetelement=$（“#”+targetid）；
console.log（'Clicked'+targetid）；
if（$（this）.data（'target-type'）=='menu'&&&！targetelement.hasClass（'active'））{//如果目标是一个子菜单，但尚未激活
$（'.active'）。设置动画({
“右”：“+=20px”
})；//将所有“活动”菜单向左移动一点（堆叠在后面）
targetelement.addClass（“活动”）.animate({
“右”：“0px”
})；//使新子菜单处于活动状态
}
});
$（'.rmenu'）。on（'单击'，'.back'，函数（）{
var parentid=$（this.parent（）.data（'parent-id'）；
$（this）.parent（）.parent（）.removeClass（'active'）.css（'right'，'-200px'）；
$（'.active'）。设置动画({
“右”：“-=20px”
});
})

正文{
背景色：暗灰色；
溢出：隐藏；
}
#菜单{
位置：绝对位置；
底部：0；
右：0；
宽度：300px；
}
.rmenu{
位置：绝对位置；
右：-200px；
底部：0；
宽度：200px；
过渡：.2s；
边框：1px纯色灰色；
}
.rmenu.active{
右：0；
}
.rmenu分区{
背景色：白色；
边框底部：1px纯色灰色；
}
.rmenu分区：最后一个孩子{
边界：无；
}
.rmenu.title{
文本对齐：居中；
填充物：5px；
颜色：灰色；
}
.rmenu.item{
填充：3倍；
光标：指针；
}
.rmenu.回来{
右侧填充：5px；
光标：指针；
}
.rmemon.子菜单指示器{
浮动：对；
右侧填充：5px；
}

家
项目>
社会的
设置
灯
椅子
你的CSS
transition
正在与你的jQuery动画对抗。两人都试图同时设置
right
属性的动画，从而导致一些笨拙的动作

通过指定CSS转换以应用于非活动元素，并在启动动画后添加类
.active
，我成功地解决了这个问题

.rmenu:not(.active) {
  transition: .2s;
}


$（'.rmenu'）。在（'click'，'.item'，function（）上{
var targetid=$（this）.data（'target-id'）；
变量targetelement=$（“#”+targetid）；
console.log（'Clicked'+targetid）；
if（$（this）.data（'target-type'）=='menu'&&&！targetelement.hasClass（'active'））{//如果目标是一个子菜单，但尚未激活
$（'.active'）。设置动画({
“右”：“+=20px”
})；//将所有“活动”菜单向左移动一点（堆叠在后面）
targetelement.animate({
“右”：“0px”
}).addClass（“活动”）；//激活新子菜单
}
});
$（'.rmenu'）。on（'单击'，'.back'，函数（）{
var parentid=$（this.parent（）.data（'parent-id'）；
$（this）.parent（）.parent（）.removeClass（'active'）.css（'right'，'-200px'）；
$（'.active'）。设置动画({
“右”：“-=20px”
});
})
正文{
背景色：暗灰色；
溢出：隐藏；
}
#菜单{
位置：绝对位置；
底部：0；
右：0；
宽度：300px；
}
.rmenu{
位置：绝对位置；
右：-200px；
底部：0；
宽度：200px；
边框：1px纯色灰色；
}
.rmenu:未激活（.active）{
过渡：.2s；
}
.rmenu.active{
右：0；
背景颜色：蓝色；
}
.rmenu分区{
背景色：白色；
边框底部：1px纯色灰色；
}
.rmenu分区：最后一个孩子{
边界：无；
}
.rmenu.title{
文本对齐：居中；
填充物：5px；
颜色：灰色；
}
.rmenu.item{
填充：3倍；
光标：指针；
}
.rmenu.回来{
右侧填充：5px；
光标：指针；
}
.rmemon.子菜单指示器{
浮动：对；
右侧填充：5px；
}

家
项目>
社会的
设置
灯
椅子
你的CSS
transition
正在与你的jQuery动画对抗。两人都试图同时设置
right
属性的动画，从而导致一些笨拙的动作

通过指定CSS转换以应用于非活动元素，并在启动动画后添加类
.active
，我成功地解决了这个问题

.rmenu:not(.active) {
  transition: .2s;
}


$（'.rmenu'）。在（'click'，'.item'，function（）上{
var targetid=$（this）.data（'target-id'）；
变量targetelement=$（“#”+targetid）；
console.log（'Clicked'+targetid）；
if（$（this）.data（'target-type'）=='menu'&&&！targetelement.hasClass（'active'））{//如果目标是一个子菜单，但尚未激活
$（'.active'）。设置动画({
“右”：“+=20px”
})；//将所有“活动”菜单向左移动一点（堆叠在后面）
targetelement.animate({
“右”：“0px”
}).addClass（“活动”）；//激活新子菜单
}
});
$（'.rmenu'）。on（'单击'，'.back'，函数（）{
var parentid=$（this.parent（）.data（'parent-id'）；
$（this）.parent（）.parent（）.removeClass（'active'）.css（'right'，'-200px'）；
$（'.active'）。设置动画({
“右”：“-=20px”
});
})
正文{
背景色：暗灰色；
溢出：隐藏；
}
#菜单{
位置：绝对位置；
底部：0；
右：0；
宽度：300px；
}
.rmenu{
位置：绝对位置；
右：-200px；
底部：0；
宽度：200px；
边框：1px纯色灰色；
}
.rmenu:未激活（.active）{
过渡：.2s；
}
.rmenu.active{
右：0；
背景颜色：蓝色；
}
.rmenu分区{
背景色：白色；
边框底部：1px纯色灰色；
}
.rmenu分区：最后一个孩子{
边界：无；
}
.rmenu.title{
文本对齐：居中；
填充物：5px；
颜色：灰色；
}
.rmenu.item{
填充：3倍；
光标：指针；
}
.rmenu.回来{
帕