javascript - 如何为该代码设置动画和旋转？

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;过渡:高度0.5s线性；

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

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

我尝试添加延迟:

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

但是延迟不会正确地使用addClass。

附注我需要在addClass.我无法使用 animate，例如

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

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

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

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);