9

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.

Kesarion
  • 2,808
  • 5
  • 31
  • 52
  • Did you try my proposed solution ? Did it work for you ? – gkalpak Apr 12 '14 at 06:00
  • I did, but "display: block" overrides the tr default "display: table-row" (http://www.w3.org/TR/html-markup/tr.html) and my more complex 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 Apr 13 '14 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 Apr 13 '14 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: http://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 Apr 13 '14 at 15:41
  • I see what you mean. Looking t it mkes me think there isn't a way :) – gkalpak Apr 14 '14 at 06:04

1 Answers1

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 become animatable you need to apply to them: display: block;

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

See, also, this short demo.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • 5
    This does work, this however unfortunately removes the table grid formatting, which is why one would use a table in the first place lol – RedactedProfile Mar 04 '15 at 20:31
  • @RedactedProfile: True :) It's not meant as a generic solution, but rather targeted against OP's specific usecase. Animating tables is a pain unfortunately (it should be avoided as much as possible). – gkalpak Mar 05 '15 at 08:17