动画完成后删除课程

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

您可以使用jQuery transitionend为transitionend事件附加事件侦听器，然后使用它来删除类

.on()

.on()

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

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

  })(this, index);
});

Answer 2

您可以使用监听器'transitionend'或

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

div {
  opacity: 0;
  color: blue;
}

.loaded {
  color: red;
}