Удалить класс после завершения анимации

Question

У меня есть анимированная последовательность для всех div с классом loaded.

Цель состоит в том, чтобы добавить класс visible к этим div (это css анимация непрозрачности) и затем удалить класс loaded после завершения / завершения анимации.

$('.loaded').each(function(index) {
  (function(that, i) {
     var t = setTimeout(function() {
        $(that).addClass("visible");
      }, 200 * i);
   })(this, index);
 });

Спасибо за помощь!

Answer 1

Вы можете прикрепить прослушиватель событий для transitionend или animationend событий с jQuery .on(), а затем удалить класс в обратном вызове

Какой вы используете, зависит от того, как вы обрабатываете анимацию:

• animationend для @keyframes/animation
• transitionend для transition

$('.loaded').each(function(index) {
  (function(that, i) {

    setTimeout(function() {
      $(that).addClass("visible");
      $(that).on('transitionend', () => {
        $(that).removeClass('loaded')
      });
    }, 200 * i);

  })(this, index);
});

.visible {
  opacity: 1;
  transition: all 500ms ease;
}

div {
  opacity: 0;
  color: blue;
}

.loaded {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>

Answer 2

Вы можете использовать прослушиватель 'transitionend' или 'animationend',

При использовании перехода css используйте transitionend, а при использовании @ ключевых кадров / анимации используйте animationend.

в соответствии с анимацией событие не запускается

$('.loaded').each(function(index) {
  (function(that, i) {
        that.addEventListener('transitionend', function(e) {$(that).removeClass("loaded"); });
     var t = setTimeout(function() {
        $(that).addClass("visible");
      }, 200 * i);
   })(this, index);
 });