javascript - CSS 过渡速度根据鼠标位置变化

Question

我有一个 div 元素，其宽度由定义区域内的用户鼠标位置决定。进入该区域后，过渡应该是平滑的，直到宽度 catch 当前鼠标位置，离开该区域时再次平滑，宽度恢复正常。在过渡之间的时间应该很快，所以宽度响应鼠标位置。

HTML

<div class="widthChanging"></div>
<div class="HoverA"></div>

CSS

.widthChanging {
    transition: width 300ms cubic-bezier(.45,.1,.14,.61);
  }

.HoverA:hover + .widthChanging {
 width: calc(0.001 / var(--mouse-x, 0) * 100vw);
 transition: width 0s;
}

我使用 Javascript 获取鼠标位置。
当离开“HoverA”区域时，宽度会平滑恢复，因为“widthChanging”中定义的过渡速度接管了。可悲的是，我不能(我认为)为进入“HoverA”区域做同样的事情。我唯一的想法是在分配过渡时间较慢的类之前等待过渡时间，但这对我来说似乎是一个糟糕的解决方案，并且还需要更多的 Javascript。

我希望你有一些比我更优雅的想法:)

Answer 1

我通过等待然后使用 javascript 分配具有新转换速度的类解决了这个问题。我认为这不是最好的方法。 这里是codepen https://codepen.io/Teiem/pen/EReJPx

html

<div class="HoverA" onmouseover="SpeedEnter2()" onclick="SpeedEnter2()"onmouseout="SpeedLeave2()"></div>

Javascript

function SpeedEnter2() {
goVar = setTimeout(function(){
   document.getElementById("SpeedId2").classList.add('Fast');
}, 300);

CSS

.Fast {
 transition: width 0s !important;
}