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

admin管理员组

文章数量:1291696

It's quite simple to smoothly animate lists using angular's ng-animate, but tables seem to be another story.

Plunker list

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.

I'm sure it's possible, for example there's this jQuery table animation

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?

Either way, I'd like to see an elegant way to do this in angular.

It's quite simple to smoothly animate lists using angular's ng-animate, but tables seem to be another story.

Plunker list

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.

I'm sure it's possible, for example there's this jQuery table animation

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?

Either way, I'd like to see an elegant way to do this in angular.

• javascript
• css
• angularjs
• angularjs-ng-repeat
• ng-animate

Share Improve this question Follow asked Apr 8, 2014 at 15:02 KesarionKesarion 2,85855 gold badges3232 silver badges5454 bronze badges 5

• Did you try my proposed solution ? Did it work for you ? – gkalpak Commented Apr 12, 2014 at 6:00
• I did, but "display: block" overrides the tr default "display: table-row" (w3/TR/html-markup/tr.html) and my more plex table crumbles. I tried a few things without success, was going to make another plunker to show what happens, but plunker didn't work at the time. I'll try to get it done soon, perhaps you or someone else knows what's going on. Thank you for the answer though, I think it's a step in the right direction. – Kesarion Commented Apr 13, 2014 at 14:03
• Indeed it only works for simple cases (where the default table-row display style can be "simulated"with other CSS fixes). Unfortunately, since tables have there unique display style, it is not possible to animate all properties (and this is not something Angular-specific). – gkalpak Commented Apr 13, 2014 at 15:02
• It may be so, perhaps I'll make some custom animation in the future if there's no simple solution. You can see the result of changing display to block here: plnkr.co/edit/OMZzCMrUgwCxgKPPjOKU?p=preview - Looking at it makes me think there's a way, though what that is I'm not sure :) – Kesarion Commented Apr 13, 2014 at 15:41
• I see what you mean. Looking t it mkes me think there isn't a way :) – gkalpak Commented Apr 14, 2014 at 6:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem is that the height of the rows remains constant (until they are removed). In order for the height of the rows to bee animatable you need to apply to them: display: block;

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

See, also, this short demo.

本文标签：