Javascript 如何在需要时正确禁用CSS3转换属性

我正在处理CSS转换属性，当我的JavaScript更新相同的CSS值时，我遇到了一个问题

我举了一个简单的例子来理解。

document.addEventListener（'DOMContentLoaded'，function（）{
let container=document.getElementById（“容器”）
让hovercontainer=document.getElementById（“悬停容器”）
让square=document.getElementById（“square”）
让mouseMove=函数（e）{
设el=e.currentTarget；
设delta_x=parseFloat（e.offsetX/el.offsetWidth）.toFixed（2）
square.style=“transform:translateX（“+parseInt（delta_x*400）+”px）；”
}
让鼠标移动=功能（e）{
square.style=“”
}
hovercontainer.addEventListener（“mousemove”，mousemove）
hovercontainer.addEventListener（“mouseleave”，mouseleave）
}，假）
html，body，#wrapper{
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
背景：#a4d24b；
显示器：flex；
}
#容器{
宽度：600px；
高度：200px；
保证金：自动；
盒影：0 2px4pRGBA（34,25,25,0.4）；
背景：#FFF；
显示器：flex；
}
#悬停集装箱{
宽度：500px；
高度：100px；
保证金：自动；
背景：#EEE；
边框顶部：1px实心#DDD；
边框底部：1px实心#CCC；
显示器：flex；
}
#方格{
指针事件：无；
宽度：90px；
高度：90px；
背景：#a4d24b；
保证金：自动5px；
盒影：2×2×4×rgba（34,25,25,0.4）插页；
变换：translateX（0）；
过渡：所有3s；
}
#容器：悬停#方形{
转换：translateX（400px）；
盒影：0px 2px 4px rgba（34,25,25,0.4）插图；
}
这真的很复杂。我从中得到的是，你希望能够在速度没有明显变化的情况下移动鼠标，并且让鼠标在几乎相同的时间到达指针，就好像鼠标从未移动过一样。为此，您基本上必须在鼠标第一次进入目标区域时进行监听，并更新目标和转换延迟，以便它不会在3秒时重置。这是一个演示，它能满足你的要求。它使用javascript来确定延迟时间应该是多少，并在更新目标X值时对其进行更新。不过，我确实不得不在过渡期间禁用放松功能，以避免看起来如此急躁。希望这能帮助你更多地理解这个问题，也许它能成为你需要的解决方案


document.addEventListener（'DOMContentLoaded'，function（）{
let container=document.getElementById（“容器”）
让hovercontainer=document.getElementById（“悬停容器”）
让square=document.getElementById（“square”）
设ts=null
让mouseMove=函数（e）{
设el=e.currentTarget；
设delta_x=parseFloat（e.offsetX/el.offsetWidth）.toFixed（2）
如果（！ts）ts=new Date（）.getTime（）+3000；
设d=Math.max（0，ts-newdate（）.getTime（））/1000+'s'；
square.style.transitionDuration=d；
square.style.transform=“translateX（“+parseInt（delta_x*400）+”px）”；
如果（d=='0s'）ts=null；
}
让鼠标移动=功能（e）{
square.style.transition=null；
square.style.transform=null；
ts=null；
}
hovercontainer.addEventListener（“mousemove”，mousemove）
hovercontainer.addEventListener（“mouseleave”，mouseleave）
}，假）
html，body，#wrapper{
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
背景：#a4d24b；
显示器：flex；
}
#容器{
宽度：600px；
高度：200px；
保证金：自动；
盒影：0 2px4pRGBA（34,25,25,0.4）；
背景：#FFF；
显示器：flex；
}
#悬停集装箱{
宽度：500px；
高度：100px；
保证金：自动；
背景：#EEE；
边框顶部：1px实心#DDD；
边框底部：1px实心#CCC；
显示器：flex；
}
#方格{
指针事件：无；
宽度：90px；
高度：90px；
背景：#a4d24b；
保证金：自动5px；
盒影：2×2×4×rgba（34,25,25,0.4）插页；
变换：translateX（0）；
过渡：所有3s线性；
}
#容器：悬停#方形{
转换：translateX（400px）；
盒影：0px 2px 4px rgba（34,25,25,0.4）插图；
}