1

Добавляю анимацию с этой библиотеки https://github.com/daneden/animate.css, в хендлере по окончанию анимации, убираю с обьекта класс с анимацей, но она прекращается не корректно, и очень часто обьект самопроизвольно начинает анимироваться если водить курсосром по его div зоне.

<script>
          $( ".leftTop" ).mouseover (function() {
            const element =  document.querySelector('.Projects')
            element.classList.add('animated', 'flip')
            element.addEventListener('animationend', function() {
            element.classList.remove('animated', 'flip');})
          });
</script>

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

1 ответ 1

4

Осмелюсь предположить, что всё выглядит примерно так.
И при наведение получается следующее:
Наведение курсора -> Воспроизведение анимации -> Двигаем курсор -> Снова анимация.

Если да, то проблема в том, что блок .Projects при анимации "увеличивается" и попадает под курсор, тем самым отдав команду js, что обработчик mouseover "обнулился" и анимация начинается повторно, при движение мышки.

$(".leftTop").mouseover(function() {
  const element = document.querySelector('.Projects');
  element.classList.add('animated', 'flip');
  element.addEventListener('animationend', function() {
    element.classList.remove('animated', 'flip');
  })
});
.leftTop {
  display: inline-block;
  padding: 10px 12px;
  background: gray;
}

.Projects {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />

<div class="leftTop">наведи</div>
<div class="Projects"></div>

Я предлагаю следующий вариант, самый простой как по мне:
Использовать одно интересное свойство, во время анимации, для этого нужно внести изменение в CSS.

$(".leftTop").mouseover(function() {
  const element = document.querySelector('.Projects');
  element.classList.add('animated', 'flip');
  element.addEventListener('animationend', function() {
    element.classList.remove('animated', 'flip');
  })
});
.leftTop {
  display: inline-block;
  padding: 10px 12px;
  background: gray;
}

.Projects {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}

/* ↓↓↓ */
.Projects.animated {
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />

<div class="leftTop">наведи</div>
<div class="Projects"></div>

pointer-events: none;
Элемент не может быть целью (target) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их pointer-events имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/всплытия.

Источник: pointer-events - CSS | MDN

2
  • Хороший, грамотный ответ. Я тоже использую, но в svg это свойство pointer-evtnts="none" Лучше наверное объяснить автору вопроса своими словами - события мыши,- клик, наведение проходят насквозь верхнего элемента к нижнему 14 фев 2019 в 5:55
  • Спасибо, очень хороший ответ. 14 фев 2019 в 8:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.