语义 UI - 队列动画

Question

我正在与另外两个朋友一起创建网络应用程序，我们在前端使用 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

由于您为每个元素使用了不同的动画类型，因此这是一种非常好的处理方式。

如果您尝试以相同的方式为相同的元素设置动画（即一个一个地滑入），您可以使用间隔选项。

$('.jiggle.images.image') 。过渡（{ 动画：'jiggle'，持续时间：800，间隔：200 }) ;

语义 UI - 队列动画

Semantic UI - queue animation

animation

frontend

meteor

semantic-ui