Обратный transition-эффект при ховере до тех пор, пока анимация не закончится

143
12 января 2017, 07:09

Хотел придумать так, чтобы сделать анимацию при ховере выполняющейся до тех пор, пока сама анимация закончится. То есть если подносить мышку туда-сюда к элементу, то анимация при обычном transition будет поддергиваться. Как сделать так, чтобы анимация шла игнорируя ховер до тех пор, пока она не примет конечное состояние?
Сложность ещё в том, что тугглится класс в js. То есть transition сначала работает при вставке конкретного класса, а потом действует другой transition от селектора элемента, когда ховер на элементе заканчивается. Но это, возможно не важно, а может, ошибаюсь. Я пробовал через таймеры решить эту задачу, но, видимо, совсем не туда копаю...

Answer 1

Например, мы создадим переменную, которая будет управлять, активен элемент или нет:

var stopanimation = false; 
 
$('div').mouseover(function() { 
    
  if (!stopanimation) {//если анимация не выключена 
 
    $(this).toggleClass('hover') 
    stopanimation = true;//выключаем 
 
    setTimeout(function() { 
      stopanimation = false;//включаем после завершения анимации. 
    }, 2000) 
 
  } 
 
})
div { 
  width: 200px; 
  height: 200px; 
  background: blue; 
  transition: all 2s; 
} 
div.hover { 
  transform: translateX(200px); 
  background: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div></div>

Answer 2

Я бы писал через библиотеку jQuery использую .hover() http://www.wisdomweb.ru/JQd/hover.php Можно также слушать события, и добавлять новые. Через CSS ты такое вряд ли реализуешь.

Answer 3

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

var el = $('.box'), 
  isAnimating = false; 
 
el.hover(function() { 
  animate(); 
}); 
 
 
function animate() { 
  if (isAnimating) { 
    return false; 
  } 
 
  isAnimating = true; 
 
  el.addClass('active').on('animationend', function() { 
    el.off('animationend'); 
    onEndAnimation(); 
  }); 
} 
 
function onEndAnimation() { 
  isAnimating = false; 
}
.box { 
  position: absolute; 
  left: 0; 
  width: 100px; 
  height: 100px; 
  background: #d32d36; 
} 
.box.active { 
  animation: moveToLeft 3.0s linear both; 
} 
@keyframes moveToLeft { 
  from { 
    left: 0; 
  } 
  to { 
    left: 150px; 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box"></div>

READ ALSO
Cordova. Крос доменный запрос не работает

Cordova. Крос доменный запрос не работает

Пытаюсь собрать приложение на CordovaВсе хорошо

229
jQuery перебор DOM элементов

jQuery перебор DOM элементов

Приветствую всехЕсть html примерно такой структуры:

186
Как получить доступ к элементу в cocos creator

Как получить доступ к элементу в cocos creator

Создал сцену, накидал в неё немного картинокТеперь нужно распределить их по местам, рандомно

159
Не изменяется позиция маркера в массиве

Не изменяется позиция маркера в массиве

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

86