javascript 您如何以与列出项目相同的方式使用 ng-animate 为表格行设置动画?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22940870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you animate table rows using ng-animate in the same way as one would list items?
提问by Kesarion
It's quite simple to smoothly animate lists using angular's ng-animate, but tables seem to be another story.
使用 angular 的 ng-animate 平滑动画列表非常简单,但表格似乎是另一回事。
The table move animations don't work, the items just snap into place, I suppose some other CSS/JS is required for the table, but I'm not sure what would work, I tried a lot of things with no success.
表格移动动画不起作用,项目只是卡入到位,我想表格需要其他一些 CSS/JS,但我不确定什么会起作用,我尝试了很多事情都没有成功。
I'm sure it's possible, for example there's this jQuery table animation
我确定这是可能的,例如有这个jQuery 表格动画
But how does this translate to angular animate? Do I have to delve into some JS/jQuery DOM manipulation through a directive or is there another way?
但这如何转化为角度动画?我是否必须通过指令深入研究一些 JS/jQuery DOM 操作,还是有其他方法?
Either way, I'd like to see an elegant way to do this in angular.
无论哪种方式,我都希望看到一种优雅的方式来执行此操作。
回答by gkalpak
The problem is that the height
of the rows remains constant (until they are removed). In order for the height
of the rows to become animatable you need to apply to them: display: block;
问题是height
行的 保持不变(直到它们被删除)。为了height
使行变得可动画,您需要对它们应用:display: block;
.animate-repeat: {
...
display: block;
}
See, also, this short demo.
另请参阅此简短演示。