如何使用ng-animate为表行设置动画的方式与列出项目的方式相同?

时间:2014-04-08 15:02:02

标签: javascript css angularjs angularjs-ng-repeat ng-animate

使用有角度的动画来平滑地动画列表非常简单,但表格似乎是另一个故事。

Plunker list

Plunker table

桌子移动动画不起作用,这些物品刚刚到位,我想桌子需要一些其他CSS / JS,但我不确定什么会起作用,我试了很多事情没有成功。

我确定这是可能的,例如jQuery table animation

但这又如何转化为角度动画呢?我是否必须通过指令深入研究一些JS / jQuery DOM操作,还是有其他方法?

无论哪种方式,我都希望看到一种优雅的方式来实现这一点。

1 个答案:

答案 0 :(得分:6)

问题是行的height保持不变(直到删除它们为止)。为了使height行成为可动画的,您需要应用它们:display: block;

.animate-repeat: {
    ...
    display: block;
}

另请参阅此 short demo