Как определить начало движения курсора и окончание движения курсора?

Question

Подскажите, пожалуйста, как определить начало движения курсора и окончание движения курсора? В чем суть: Есть родительский блоки и дочерний, который спозиционирован в правом верхнем углу. При начале движения курсора в родительском блоке ширина дочернего блока должна увеличится с 0 до 20%. При окончании движения курсора (когда мышь не двигается) ширина дочернего блока уменьшается до нуля.

const chart = document.querySelector('#chart')
const menuTaget = document.querySelector('#context-memu-target')

chart.addEventListener('mousemove', (event) => {
  console.log(event.clientX)
});

#chart {
  position: relative;
  width: 250px;
  height: 150px;
  background-color: orange;
}

#context-memu-target {
  position: absolute;
  top:1%;
  right:1%;
  width: 0;
  height:50%;
  background-color: red;
}

#context-memu-target.active{
  width:20%;
  transition: width 0.3s ease;
}

<div id="chart">
  <div id="context-memu-target" class=""></div>
</div>

Answer 1

смотри комментарии.

const chart = document.querySelector('#chart')
const menuTarget = document.querySelector('#context-memu-target')

let animationStopInterval;

chart.addEventListener('mousemove', (event) => {
  clearInterval(animationStopInterval) //сбрасываем интервал
  const isActive = menuTarget.classList.contains('active')
  if (!isActive) // устанавливаем класс только если он еще не установлен
    menuTarget.classList.add('active')
  animationStopInterval = setTimeout(()=>menuTarget.classList.remove('active'), 500) //задержка закрытия
});

#chart {
  position: relative;
  width: 250px;
  height: 150px;
  background-color: orange;
}

#context-memu-target {
  position: absolute;
  top:1%;
  right:1%;
  width: 0;
  height:50%;
  background-color: red;
  transition: width 0.3s linear; /*должно быть здесь*/
}

#context-memu-target.active{
  width:20%;
  /* transition: width 0.3s linear; это должно быть в #context-memu-target */
}

<div id="chart">
  <div id="context-memu-target" class="">
  </div>
</div>

БЛОГ НА HUSL

Как определить начало движения курсора и окончание движения курсора?

Ответы (1 шт):