Удалите класс после запуска анимации - PullRequest
Новая
       7

Удалите класс после запуска анимации

0 голосов
/ 26 мая 2020

Я пытаюсь добавить класс только во время анимации, а затем удалить его после запуска. Анимация бесконечна.

  1. addClass кажется успешным, но правильно ли событие animationiteration?
  2. Как кодировать removeClass? 

var $box = $('.box');
var isAnimate = false;

$box.on('animationiteration', function() {
  if (isAnimate) {
    return;
  } else {
    $box.addClass('animation');
    isAnimate = false;
  }
});
.box {
  width: 100px;
  height: 100px;
  background: #000;
  animation: animation 6s ease 0s infinite;
}

@keyframes animation {
  0% {
    transform: scale(.3);
  }
  50% {
    transform: scale(.6) rotate(-45deg);
    background: red;
  }
  100% {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1 Ответ

0 голосов
/ 26 мая 2020

Вы не можете следовать CSS циклам анимации из Javascript. Однако вы можете подделать это, используя таймер. Поскольку ваш цикл анимации занимает 6 секунд, вы можете использовать 6-секундный тайм-аут, чтобы остановить анимацию в конце цикла.

Некоторые дополнительные вещи, чтобы предотвратить мерцание в начале и в конце:

  1. Установите также начальное преобразование в поле
  2. По истечении тайм-аута добавьте новый класс, который имеет преобразование последнего ключевого кадра.

Вот как: 

var $box = $('.box');

$box.addClass('animation');
setTimeout(function() {
  $box.addClass('end-state');
  $box.removeClass('animation');
}, 6000);
.box {
  width: 100px;
  height: 100px;
  background: #000;
  transform: scale(.3); /*transformation from the first keyframe*/
}

.end-state {
  /*transformation and other properties from the last keyframe*/
  transform: scale(1) rotate(180deg);
  background: blue;
}

.animation {
  animation: animation 6s ease 0s infinite;
}

@keyframes animation {
  0% {
    transform: scale(.3);
  }
  50% {
    transform: scale(.6) rotate(-45deg);
    background: red;
  }
  100% {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...