CSS转换速度根据鼠标位置的变化而变化

Question

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

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;
}