动画完成后移除class

Question

我有所有 div 和 class loaded 的动画序列。

目标是将 class visible 添加到这些 div（这是一个 css 不透明动画），然后删除 class loaded 一旦动画是 completed/finished.

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

感谢您的帮助！

Answer 1

您可以为 transitionend or animationend events with jQuery .on() 附加事件侦听器，然后在回调

中删除 class

您使用哪一个取决于您处理动画的方式：

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'、

When using the css transition use transitionend, and when using @keyframes/animation, use 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);
 });

动画完成后移除class

Remove class after animation is completed

jquery

class

sequence

each