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分配具有新转换速度的类来解决了该问题。我认为这不是最好的方法。这里的代码笔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;
}

基于鼠标位置的CSS过渡速度更改

1 个答案: