动画完成后删除类答案

【问题标题】：Remove class after animation is completed动画完成后删除类
【发布时间】：2020-05-11 02:33:19
【问题描述】：

我有一个动画序列，用于所有 div 类 loaded。

目标是将visible 类添加到这些div（这是一个css 不透明动画），然后在动画完成/完成后删除loaded 类。

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

感谢您的帮助！

【问题讨论】：

标签： jquery class sequence each

【解决方案1】：

您可以使用 jQuery .on() 为 transitionend 或 animationend 事件附加事件侦听器，然后在回调中删除该类

你使用哪一个取决于你如何处理动画：

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>

【讨论】：

【解决方案2】：

你可以使用监听器'transitionend'或者'animationend'，

当使用 css 过渡时使用 transitionend，而当使用 @keyframes/animation，使用动画结束。

根据animationend event not firing

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

【讨论】：

完美运行！我不知道听众是“transitionend”还是“animationend”。真的很有用，非常感谢！