Question

我想创建一个花哨的淡入淡出功能，在我的复合视图中逐一添加'li'。

它将首先追加li [0]而不是5000ms之后的下一个，以及5000ms之后的另一个等等。

我怎样才能达到这个效果？现在我只编写了简单的淡入淡出：

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"

Answer 1

collectionView的默认机制是准备所有子视图并将它们全部显示在一起。

因此，不会发生问题对itemView的影响，因为collectionView以整体呈现。

要实现此效果，您需要模仿collectionView的DOM对象上的假效果，而不是itemViews。

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

感谢jQuery部分的<{3}}

使用Marionette逐个附加项目视图

1 个答案: