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

时间:2020-12-05 20:55:22

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

Plunker表

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.

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

1 个解决方案

#1


5  

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;

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

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

See, also, this short demo.

另见这个简短的演示。

#1


5  

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;

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

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

See, also, this short demo.

另见这个简短的演示。