语义UI - 队列动画

Question

我正在创建与另外两个朋友的Web应用程序，我们正在使用Meteor和Semantic UI作为前端。当页面呈现时，我使用语义转换来为3列添加动画。我想让这三样东西一个接一个地出现。

这里是我的代码

$('.imgColumn') 
.transition({ 
    animation : 'scale', 
    duration : 600, 
    onComplete : function(){ 
    $('.leftColumn') 
    .transition({ 
     animation : 'fly right', 
     duration : 500, 
     onComplete : function(){ 
     $('.rightColumn') 
     .transition({ 
      animation : 'fly left', 
      duration : 500 
     }); 
    } 
    }); 
} 

}）;

我的问题是 - 这是一个好办法吗？还有其他解决方案比我的更好吗？

Answer 1

由于您对每个元素使用不同的动画类型，因此这是处理它的完美方式。

如果您尝试以相同的方式对相同的元素进行动画处理（即逐个滑动），则可以使用interval选项。

$（ 'jiggle.images图像配'） .transition（{ 动画： '轻摇'， 持续时间：800， 间隔：200 }） ;