2

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

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 - это не решение.

1 ответ 1

3

Ладно, уже сам разобрался. Решение было простым. Сделал 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>

Ваш ответ

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

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