Javascript jquery端导航在移动设备上不顺畅

我用Jquery制作的侧导航有问题，它在笔记本电脑或台式机上运行良好，但在移动设备上，过渡不平稳，就像在台式机或笔记本电脑上一样，我不知道是什么导致了问题

---

如果你想知道我是通过切换一个类来做侧导航的，这个类从左开始占据侧导航的位置：-30%；到30%

我真的想让你看看性能上的差异。看看我的演示。单击一个框以查看其移动。即使在我的新MacBookAir上，我也能分辨出区别。正如您所注意到的，在移动设备上，差异要明显得多

.parentDiv {
  transition: 300ms all;
}

$（.box”）。在（“单击”，函数（）{
$（此）.addClass（“开始”）；
})
$（“.reset”）。在（“单击”，函数（）{
$（“.box”）.removeClass（“开始”）；
})

@关键帧向左移动{
从{
左：0；
}
到{
左：计算（100vw-var（--框宽））；
}
}
@关键帧随变换移动{
到{
转换：转换（计算（100vw-var（--框宽））；
}
}
.盒子{
--盒宽：80px；
--箱体高度：70px；
宽度：var（--框宽）；
高度：var（--框高）；
行高：var（--框高）；
背景色：rgba（0,128,0,1）；
位置：绝对位置；
颜色：白色；
显示：内联块；
光标：指针；
字体系列：helvetica；
过渡：0.3s背景色缓进缓出；
}
.box:悬停{
背景色：rgba（0,128,0,8）；
}
.箱跨{
文本对齐：居中；
显示：块；
字号：85%；
}
.盒子2{
顶部：计算值（变量（--框高）+5px）；
}
1.开始{
动画：3s向左移动；
}
.2.开始{
动画：3s向前移动，变换；
}
钮扣{
位置：固定；
底部：0；
左：0；
字号：1.2rem；
字体系列：helvetica；
填充：10px；
边界：无；
}
html，正文{
保证金：0；
}

左边
使改变
重置

您不想使用

left

-使用

transform:translateX（）

显示负责此行为的代码