如何设置和旋转此代码的动画

How can I animate and rotation this code?

本文关键字：旋转 代码 动画 何设置 设置      更新时间：2024-01-11

我有html代码：

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

在这个算法中我需要：

  1. 对于.block-1添加类活动
  2. 等待500毫秒-等待.块-2添加类活动
  3. 等待400毫秒。-等待。块3添加类活动
  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');
...

但是延迟不能正确使用addClass。

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

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

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

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

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

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

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

他们中的很多人。。做得像。。。不那么令人困惑的方式。。。

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

听起来不稳定，但：

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

如果我用正确的方式找到了你，你想等到你的块上的转换结束后再激活另一个块，这样你就可以捕获transitionEnd事件，然后添加下一个类，比如：

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