與Marionnete一個接一個地添加項目視圖

我想創建一個花式淡入淡出功能，在我的複合視圖中逐一添加'li'。與Marionnete一個接一個地添加項目視圖

在5000ms之後會先添加li [0]，然後在5000ms之後添加li [0]，等等。

我該如何達到這個效果？現在我只編碼了簡單的淡入：

class List.ConferenceSingle extends App.Views.ItemView 
    template: "conference/list/_conference_single" 
    tagName: "li" 
    onRender: => 
     @$el.fadeIn(2000) 


class List.Conference extends App.Views.CompositeView 
    template: "conference/list/_conference" 
    itemView: List.ConferenceSingle 
    itemViewContainer: "ul"

來源

2014-02-28 lipenco

collectionView的默認機制是準備所有的子視圖並將它們一起顯示。

因此，在您的問題itemView的影響不會發生，因爲collectionView呈現在一個整體。

要達到此效果，您需要模仿collectionView的DOM對象而不是itemView的假效果。

class List.Conference extends App.Views.CompositeView 
    onRender: -> # or onDomRefresh? not tested 
    @childElementsFadeIn() 

    # This will wait for each li to fadeIn completely, and then next 
    # This is again a fake operation as `each` is executed without any delay 
    childElementsFadeIn: -> 
    duration = 5000; 
    @$el.each (index, element) -> 
     $(element).delay(index * duration).fadeIn()

感謝https://stackoverflow.com/a/2372421/1721198 jQuery的一部分

來源

2014-02-28 08:40:03

與Marionnete一個接一個地添加項目視圖

回答

相關問題