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

Question

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.

Answer 1

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.