Удалить класс спустя какое то время

Question

const runClass = elem => {
    !elem.classList.contains('class') && elem.classList.add('class');
    setTimeout(_ => elem.classList.remove('class'), 3000);
};

elem.onpointermove = e => runClass(e.target);

Когда пользователь наводит на элемент или по элементу мышей водит. Каждый раз вызываем класс, в нем необходимо добавить класс к элементу если его нет и удалить по истечению 3 секунд с момента последнего действия, то есть вызова.

В целом работает но криво. Удаляет класс по истечению 3 секунд и снова его добавляет. На некоторых элементах стоит анимация и когда класс добавляется по новой то и анимация тоже по новой. Как решить это?

Answer 1

Чтобы анимация не сбивалась, думаю нужны другие/дополнительные события элемента.

Вот это наводка: События движения: "mouseover/out/move/leave/enter"

Нужно запрограмировать событие входа/выхода в/из объект(а), введя булеву переменную состояния входа/выхода. Это основывается на событиях mouseover/mouseout и свойстве relatedTarget.

Событие mouseover происходит, когда мышь появляется над элементом, а mouseout — когда уходит из него. Требуется по логике оперировать этим дополнительным флагом.

#box-id1 {
  width: 200px; height: 200px;
}
    
.box-red {
  background-color: red;  
}

.box-green {
  background-color: green;  
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="" />
  <meta charset="utf-8">
  <title>Test mouse</title>
  <meta name="author" content="">
</head>



<body>
  
<div class="container">
  <div class="box-green" id="box-id1"></div>
</div>

<script>
  let box = document.querySelector("#box-id1");
  
  
  box.onmouseover = (event) => {
    box.classList.remove("box-green");
    box.classList.add("box-red");
  };
  
  box.onmouseout = (event) => {
    box.classList.remove("box-red");
    box.classList.add("box-green");
  };
  
</script>

</body>
</html>

Answer 2

Можно попробовать на jquery:

$(".changeColor").mouseenter(() => {
  $(".changeColor").toggleClass("backgroundRed");
  $(".changeColor").toggleClass("backgroundGreen");
});
$(".changeColor").mouseout(() => {
  $(".changeColor").toggleClass("backgroundRed");
  $(".changeColor").toggleClass("backgroundGreen");
});

.changeColor {
  width: 200px;
  height: 200px;
}

.backgroundRed {
  background-color: #ff0000;
}

.backgroundGreen {
  background-color: #00ff00
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="changeColor backgroundRed"></div>

Answer 3

Анимация сбивается, судя по всему, из-за того, что setTimeout отрабатывает всегда, даже если последнее действие было совершено менее 3 секунд назад. Можно сбрасывать таймаут, чтобы класс не удалялся с элемента преждевременно:

const elem = document.getElementById("box");
let timer = null;

const runClass = elem => {
  elem.classList.add('class');
  clearTimeout(timer);
  timer = setTimeout(() => elem.classList.remove('class'), 3000);
};

elem.onpointermove = e => runClass(e.target);

БЛОГ НА HUSL

Удалить класс спустя какое то время

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