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

Kes*_*ion 9 javascript css angularjs angularjs-ng-repeat ng-animate

使用angular的ng-animate平滑地动画列表非常简单,但表格似乎是另一个故事.

Plunker列表

Plunker表

表移动动画不起作用,项目只是快速到位,我想桌子需要一些其他的CSS/JS,但我不确定什么会起作用,我尝试了很多没有成功的事情.

我确信这是可能的,例如有这个jQuery表动画

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

无论哪种方式,我都希望看到一种优雅的方式来做角度.

gka*_*pak 6

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

.animate-repeat: {
    ...
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

另见这个简短的演示.

  • 这确实有效,但不幸的是删除了表格网格格式,这就是为什么人们会在第一个地方使用表格lol (5认同)