語義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 }） ;