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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 00:03:31  来源:igfitidea点击:

How do you animate table rows using ng-animate in the same way as one would list items?

javascriptcssangularjsangularjs-ng-repeatng-animate

提问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 平滑动画列表非常简单,但表格似乎是另一回事。

Plunker list

Plunker 列表

Plunker table

普兰克桌

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 heightof the rows remains constant (until they are removed). In order for the heightof 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.

另请参阅此简短演示