Javascript 可以在这个古怪的动画上使用一些指针

我已经制作了3个部分，在悬停状态下制作动画。当我以一种相当缓慢的速度徘徊时，一切都很好，但是如果我快速地移动鼠标，中间的部分似乎在右边有一个空隙，因为它很快地试图匹配它所设置的宽度。p> 我猜只有右侧会受到影响，因为它是绝对定位的，左侧的值已经设置好了，而右侧基本上可以做它需要做的事情来匹配它的最终状态

我已经尝试了很多不同的方法来让它工作——改变值、父容器弹性、定位等等，但没有成功。我真的不知道我如何才能补救这种情况，我想看看我错过了什么聪明的解决方案

下面是所有的代码，不过我会更多地关注注释为mid的部分。如果代码段无法运行，我会将其包括在内

const left=document.querySelector.left； const mid=document.querySelector.mid； const right=document.querySelector.right； const container=document.querySelector.container； //======悬停状态====== /* *左侧部分 */ //悬停 left.addEventListenermouseenter，=>{ container.classList.addhover-left； mid.classList.addpush-right； }; //休假 left.addEventListenermouseleave，=>{ container.classList.removehover-left； mid.classList.removepush-right； }; /* *中段 */ //悬停 mid.addEventListenermouseenter，=>{ container.classList.addhover-mid； }; //休假 mid.addEventListenermouseleave，=>{ container.classList.removehaver-mid； }; /* *右侧部分 */ //悬停 right.addEventListenermouseenter，=>{ container.classList.addhover-right； mid.classList.addpush-left； }; //休假 right.addEventListenermouseleave，=>{ container.classList.removehaver-right； mid.classList.removepush-left； }; ：根{ -容器背景颜色：333； -左背景颜色：rgba223,39,39,0.7； -左btn悬停颜色：rgba161,11,11,0.3； -中背景颜色：rgba70、223、39、0.7； -中间btn悬停颜色：rgba24,92,10,0.3； -右背景颜色：RGBA391862230.7； -右btn悬停颜色：rgba10,18,92,0.3； -悬停宽度：50%； -其他宽度：25%； -速度：1000ms； } html， 身体{ 填充：0； 保证金：0； 字体系列：富兰克林哥特式中字体、Arial窄字体、Arial字体、无衬线字体； 宽度：100%； 身高：100%； 溢出x：隐藏； } 氢{ 字号：4rem； 颜色：fff； 位置：绝对位置； 左：50%； 最高：30%； 转化：translateX-50%； 空白：nowrap； } .btn{ 显示：块； 位置：绝对位置； 左：50%； 最高：50%； 高度：2.5雷姆； 垫面：1.3rem； 宽度：15雷姆； 文本对齐：居中； 颜色：fff； 边框：fff实心0.2rem； 字号：1rem； 字体大小：粗体； 文本转换：大写； 文字装饰：无； 转化：translateX-50%； } .split.left.btn:悬停{ 背景色：var左btn悬停色； 边框颜色：var左btn悬停颜色； } .split.mid.btn:悬停{ 背景色：var中间btn悬停色； 边框颜色：var中间btn悬停颜色； } .split.right.btn:悬停{ 背景颜色：var右btn悬停颜色； 边框颜色：var右btn悬停颜色； } .集装箱{ 位置：绝对位置； 宽度：100%； 身高：100%； 背景：var容器bg颜色； } .分开{ 位置：相对位置； 宽度：33.3333%； 身高：100%； 溢出：隐藏； } .左{ 位置：绝对位置； 左：0； } 左：前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：var左bg色； } .split.mid{ 位置：绝对位置； 左：33.3333%； } 中：之前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：var-mid-bg颜色； } .分裂，对{ 位置：绝对位置； 右：0； } .分开。对：之前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：右背景色； } .左， .split.mid， .分裂，对， 左：在， 中段：之前， .分开。对：之前{ 过渡：var速度全部缓进缓出； } /* 左边 */ .向左悬停，向左{ 宽度：变量悬停宽度； } .向左悬停，中间{ 宽度：其他宽度； } .向左悬停。中：在{ z指数：2； } .向左，向右{ 宽度：其他宽度； } .向左悬停。向右：在{ z指数：2； } /* 中间 */ .停在中间，中间{ 左：25%； 宽度：变量悬停宽度； } .悬停在中间。向左{ 宽度：其他宽度； } .悬停在中间。左：在{ z指数：2； } .停在中间，对吗{ 宽度：其他宽度； } .悬停在中间。右：在{ z指数：2； } /* 正当 */ .右转，右转{ 宽度：变量悬停宽度； } .向右，向左{ 宽度：其他宽度； } .向右悬停。向左：在{ z指数：2； } .向右悬停，中间{ 宽度：其他宽度； } .向右悬停。中：在{ z指数：2； } /*推中*/ .向右推{ 左：50%； } .左推{ 左：25%； } @媒体屏幕和最大高度：700px{ 氢{ 前10名 %; } .btn{ 最高：60%； } } 测验 选择1 选择2 选择3

---

我会抛弃javascript，用css-flexbox实现这一点。由于绝对定位的元素，第一次尝试时可能会遇到麻烦

为了进行设置，我删除了所有绝对定位的类，将父容器设置为DisplayFlex

flex速记flex增长| flex收缩| flex基本\ 更多信息：

然后，你可以告诉你的幻灯片弹性：10变量其他宽度；即使其他宽度只有25%，它们也会自动填充空白，因为1告诉它们可以增长

然后，您可以使用flex:0 var hover-width创建一个.slides:hover类；这会将悬停的幻灯片扩展到50%。如果你不想让1超过你的悬停宽度，那么在这个类中增加1是没有必要的

希望这有帮助

：根{ -容器背景颜色：333； -左背景颜色：rgba223,39,39,0.7； -左btn悬停颜色：rgba161,11,11,0.3； -中背景颜色：rgba70、223、39、0.7； -中间btn悬停颜色：rgba24,92,10,0.3； -右背景颜色：RGBA391862230.7； -右btn悬停颜色：rgba10,18,92,0.3； -悬停宽度：50%； -其他宽度：25%； -速度：1000ms； } html， 身体{ 填充：0； 保证金：0； 字体系列：富兰克林哥特式中字体、Arial窄字体、Arial字体、无衬线字体； 宽度：100%； 身高：100%； 溢出x：隐藏； } 氢{ 字号：4rem； 颜色：fff； 位置：绝对位置； 左：50%； 最高：30%； 转化：translateX-50%； 空白：nowrap； } .btn{ 显示：块； 位置：绝对位置； 左：50%； 最高：50%； 高度：2.5雷姆； 垫面：1.3rem； 宽度：15雷姆； 文本对齐：居中； 颜色：fff； 边框：fff实心0.2rem； 字号：1rem； 字体大小：粗体； 文本转换：大写； 文字装饰：无； 转化：translateX-50%； } .split.left.btn:悬停{ 背景色：var左btn悬停色； 边框颜色：var左btn悬停颜色； } .split.mid.btn:悬停{ 背景色：var中间btn悬停色； 边框颜色：var中间btn悬停颜色； } .split.right.btn:悬停{ 背景颜色：var右btn悬停颜色； 边框颜色：var右btn悬停颜色； } .集装箱{ 显示器：flex； 宽度：100%； 身高：100%； 背景：var容器bg颜色； } .分开{ 位置：相对位置； 弹性：1 0 var其他宽度； 身高：100%； 溢出：隐藏； } .拆分：悬停{ 柔性：1 0 var悬停宽度； } 左：前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：var左bg色； } 中：之前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：var-mid-bg颜色； } .分开。对：之前{ 位置：绝对位置； 内容：； 宽度：100%； 身高：100%； 背景：右背景色； } .左， .split.mid， .分裂，对， 左：在， 中段：之前， .分开。对：之前{ 过渡：var速度全部缓进缓出； } 选择1 选择2 选择3

---

我甚至不认为这是一个单独的CSS的可能性。非常感谢你的启示！