Выполнить анимацию css из javascript

154

14 марта 2017, 15:16

Есть такого рода анимация:

var load = document.querySelector('.loading'); 
 
load.addEventListener('click', function listnerForClick() { 
  load.style.animationName = 'navRightAnimationOnLoadingArts'; 
});

.loading { 
  position: relative; 
  top: 10px; 
  left: 10px; 
  width: 100px; 
  height: 100px; 
  background-color: orange; 
  //animation-name: navRightAnimationOnLoadingArts		 
  -webkit-animation-duration: 300ms; 
  animation-duration: 300ms; 
  -webkit-animation-timing-function: ease; 
  animation-timing-function: ease; 
  -webkit-animation-delay: 0s; 
  animation-delay: 0s; 
  -webkit-animation-iteration-count: 4; 
  animation-iteration-count: 4; 
  -webkit-animation-direction: alternate; 
  animation-direction: alternate; 
} 
 
@-webkit-keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
    filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
} 
 
@keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
    filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
}

<div class="loading"></div>

Чтобы начать анимацию, можно просто вписать animation-name: navRightAnimationOnLoadingArts при помощи js, что я, собственно, и делаю.
Но что, если нужно несколько раз воспроизводить анимацию?

Несколько не жестких условий:

Необходимо воспроизводить её только когда происходит клик по диву.
Анимация не должна перекрывать друг друга (это на случай, если предложите таймер в решении - учтите, что по диву можно будет кликнуть много раз, то есть анимация может быть вызвана несколько раз пока она воспроизводится).

Что я хочу сказать: codepen - это не решение.

Answer 1

Ладно, уже сам разобрался. Решение было простым. Сделал 2 варианта:

Через таймер, но с переменной для отслеживания состояния анимации.

codepen

'use strict'; 
 
var load = document.querySelector('.loading'); 
var isAnimationPlaying = false; 
 
load.addEventListener('click', function listnerForClick() { 
  if (isAnimationPlaying) return; 
  load.style.animationName = 'navRightAnimationOnLoadingArts'; 
  isAnimationPlaying = true; 
  setTimeout(function () { 
    load.style.animationName = ''; 
    isAnimationPlaying = false; 
  }, 1200); 
});

.loading { 
  position: relative; 
  top: 10px; 
  left: 10px; 
  width: 100px; 
  height: 100px; 
  background-color: orange; 
  -webkit-animation-duration: 300ms; 
          animation-duration: 300ms; 
  -webkit-animation-timing-function: ease; 
          animation-timing-function: ease; 
  -webkit-animation-delay: 0s; 
          animation-delay: 0s; 
  -webkit-animation-iteration-count: 4; 
          animation-iteration-count: 4; 
  -webkit-animation-direction: alternate; 
          animation-direction: alternate; 
} 
 
@-webkit-keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
            filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
} 
 
@keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
            filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
}

<div class="loading"></div>

С использованием jQuery навесить на блок листнер на конец анимации.

Он мне нравится больше.
codepen

'use strict'; 
 
var load = document.querySelector('.loading'); 
 
load.addEventListener('click', function listnerForClick() { 
  load.style.animationName = 'navRightAnimationOnLoadingArts'; 
}); 
 
$(load).on("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function() { 
  load.style.animationName = ''; 
});

.loading { 
  position: relative; 
  top: 10px; 
  left: 10px; 
  width: 100px; 
  height: 100px; 
  background-color: orange; 
  -webkit-animation-duration: 300ms; 
  animation-duration: 300ms; 
  -webkit-animation-timing-function: ease; 
  animation-timing-function: ease; 
  -webkit-animation-delay: 0s; 
  animation-delay: 0s; 
  -webkit-animation-iteration-count: 4; 
  animation-iteration-count: 4; 
  -webkit-animation-direction: alternate; 
  animation-direction: alternate; 
} 
 
@-webkit-keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
    filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
} 
 
@keyframes navRightAnimationOnLoadingArts { 
  to { 
    -webkit-filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
    filter: drop-shadow(0px 0px 5px deeppink) drop-shadow(0px 0px 5px deeppink); 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="loading"></div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Свои скрипты для элементов Yii2

Добрый день, такой вопрос, мне в кнопку

185

javascript

Как удалить часть title через JS?

На странице дублирую заголовок этим JS:

224

javascript

Update полученных данных (AJAX) JQUERY

ЗдравствуйтеТолько начал изучение AJAX

183

javascript

Вывод js на сайты кэширование

Доброго времени суток друзьяНе знаю как побороть кэширование

184