jquery - 动画完成后删除类

Question

我有一个包含类已加载的所有div的动画序列。

目标是将类 visible 添加到这些 div(这是一个 css 不透明动画)，然后在动画已完成/完成。

$('.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对于过渡

$('.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>