如何为这段代码设置动画和旋转？

Question

我有html代码：

<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>

我需要在这个算法中：

1. 为 .block-1 添加类 active
2. 等待 500 毫秒。 - 为 .block-2 添加类 active
3. 等待 400 毫秒。 - 为 .block-3 添加类 active
4. 等待 500 毫秒。 - 删除所有类活动并重复所有

但是有一些问题……

这是动画：

.block-1 有样式height: 0; transition: height .5s linear;

.block-1.active 有样式height: 100px;

因此，块高度在 500 毫秒内从 0px 变化到 100px。

我尝试添加延迟：

$('.block-1').addClass('active');
$('.block-2').delay(500).addClass('active');
$('.block-3').delay(900).addClass('active');
...

但是 delay 不会正确地使用 addClass。

附：我需要在 addClass 中。我不能使用动画，比如

$('.block-1').animate({height: 100px}, 500);

...因为这只是演示代码，而在我的真实代码中，我不仅有一个 height，而且还有很多其他属性。

下一个问题是延迟。 延迟是从一开始就考虑的，我需要写代码如：

1. 第一步
2. 第二步 - 延迟 500
3. 第三步 - 延迟 900
4. 第四步 - 延迟 1200
5. ...

但是我有大约 40 个步骤，如果我尝试编辑其中一个步骤，我会遇到很多问题...

附：对不起我的英语不好（我来自圣彼得堡）。

Answer 1

他们中的很多.. 喜欢... 不那么混乱的方式...

function doStuff()
{
          $('.block-1').addClass('active');
          setTimeout(function() {  $('.block-2').addClass('active');  }, 500);
          setTimeout(function() { $('.block-3').addClass('active'); }, 900);
          setTimeout(function() { $('.block-1, .block-2, .block-3').removeClass('active'); },1300);

}

doStuff();

setInterval(function() { doStuff();  }, 1400);

Answer 2

听起来很奇怪，但是：

setInterval(function() {
  $('.block-1').addClass('active');
  setTimeout(function() {
    $('.block-2').addClass('active');
    setTimeout(function() {
      $('.block-3').addClass('active');
      setTimeout(function() {
        $('.block-1, .block-2, .block-3').removeClass('active');
      }, 500);
    }, 400);
  }, 500);
}, 1400);

Answer 3

如果我以正确的方式帮助您，您希望等到您的块上的转换结束以激活另一个块，因此您可以捕获 transitionEnd 事件，然后添加您的下一个类，例如：

$('#block-1').
addClass('active').
on('transitionEnd webkitTransitionEnd mozTransitionEnd 
  msTransitionEnd oTransitionEnd ', function(){
  $('#block-2').addClass('class-2').on(/*so on here*/);
  //
})