마리오네트 컬렉션보기로 렌더링 된 항목에 애니메이션 적용

Question

나는 앱 탐색 항목을 나타내는 모델이 포함 된 컬렉션이 있습니다. 내 앱에서는 탐색이 화면의 왼쪽에 있으며 렌더링 될 때마다 탐색 항목을 하나씩 슬라이드 할 수 있기를 원합니다. 네비게이션 컨테이너는 콜렉션 뷰이고 네비게이션 아이템은 아이템 뷰입니다.

컬렉션보기에서 appendHtml 메소드를 이와 같이 변경했습니다. 새로 생성 클래스는 화면 왼쪽으로 항목을 밀어 스타일을 가지고 있기 때문에, 내가 추가하면 생각했다

// Label the dom element as newly created 
    assignNewlyCreated: function() { 
     this.$el.addClass('newly-created'); 
    }, 

    // Slide in the item. 
    slideIn: function() { 
     console.log('sliding in element', this.el); 
     this.$el.animate({left: 0}); 
    } 

:

appendHtml: function (collectionView, itemView, index) { 
      console.log('APPENDING ITEM VIEW', itemView.el); 
      itemView.assignNewlyCreated(); 
      collectionView.$el.append(itemView.el); 
      itemView.slideIn(); 
    }, 

항목보기

는 이러한 관련 방법이 그것은 이것을 좋아하고 DOM에 일단 들어가면 그것을 움직여야합니다. 불행히도이 작동하지 않습니다 및 탐색 항목을 이미 애니메이션없이 화면에 나타납니다. 내가 여기서 뭔가 잘못하고 있는데, 왜이게 효과가없는 것 같아요? 내 애플 리케이션의 다른 부분에 오류가있을 수 있다고 생각하지만 그 경우 및 고정, 위의 코드가 작동 해야하는 경우?

Answer 1

아마 이런 식으로 뭔가를 시도 :

MyItemView = Backbone.Marionette.extend({ 
    template: "#template", 
    className: "newly-created", 
    onRender: function(){ 
    this.$el.animate({left: 0}); 
    } 
}); 

이 직접 항목에 클래스를 설정하고하는 onRender 그것이 정의 Fi를 자동으로 호출한다 (그것이 CollectionView에 의해 렌더링 될 때의 항목보기 슬라이드, 거기에 당신이 할 수있는 다른 것).