Изменение скорости перехода 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.Я не думаю, что это лучший способ сделать это.Здесь кодовая ручка 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;
}