не корректно прекращается css анимация

04 октября 2019, 08:40

Добавляю анимацию с этой библиотеки 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>

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

Answer 1

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

Если да, то проблема в том, что блок .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