Ember js animate insert

我会先解释我想达到什么，然后解释我试过的。我想显示10个条目，并制作一个动画，所以它不会仅仅作为批量“出现”，而是要渲染一个条目。即出现第一项，然后在100ms后出现第二项，等等。Ember js animate insert

我累了，就是给每个入口对象的css规则：“display：hidden”，然后重写Entry View的didInsertElement，并用jquery淡入元素。但这并没有帮助，它只是延迟渲染所有条目。

下面是部分代码：

var inserted = 0; 

EntryView = Ember.View.extend({ 
    classNames : [ 'hide' ], // hide is display:none 
    didInsertElement : function(){ 
     this._super(); 
     this.$().fadeIn(inserted * 100); 
     inserted++; 
    } 
})

那么这里发生的是，每个条目添加到DOM中（传递给淡入值的增加而渐弱，使其看起来像他们增加了一个之后）

但正如我所说，它不工作.. 想法？谢谢！

来源

2012-08-16 user1602950

~~该作业可以在 willInsertElement处理程序~~ 中完成。

更新

好吧，我已经更新了小提琴，使用didInsertElement（如你在做），但在第一次添加的声明this.$().hide()。我认为这是不理想，但似乎工作

http://jsfiddle.net/Sly7/bHL66/

更新（二）

我觉得在这个问题所提出的方法是很好的，经过一番思考，我想知道为什么这不起作用......而事实上，它的确如此！你确定你的CSS定义正确吗？

http://jsfiddle.net/Sly7/mKvER/

来源

2012-08-16 12:10:06

这实在是一个评论，而不是对问题的回答。请使用“添加评论”为作者留下反馈。 – Thor 2012-08-16 12:26:23

我想知道发表这个评论，因为我认为这可能是一个答案（这个作品）。但是，这太短了，我正在完成 – 2012-08-16 12:35:58

sly7_7感谢您的超级快速重播！当数组已经被定义时它确实工作，但是我的数组是从服务器中获取的。我改变了jsfiddle来应用我的场景：http://jsfiddle.net/bHL66/3/正如你所看到的，它被添加为一个块。没有动画... – user1602950 2012-08-16 12:53:51

Ember js animate insert

回答

相关问题