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

javascript css angularjs angularjs-ng-repeat ng-animate
Kesarion picture Kesarion · Apr 8, 2014 · Viewed 14k times · Source

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

gkalpak picture gkalpak · Apr 9, 2014

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.

Related questions

How can I change the background-color using ng-class?

I am trying to change the background color whenever someone inputs a '5' while using ng-class. I am really new to AngularJS and just writing things to get the hang of it. Am I supposed to use an ng-if …

Read More
Angularjs toggle div visibility

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here <button ng-click="toggle()">test</…

Read More
CSS: Change parent on focus of child

Let's say you have something like: <div class="parent"> <input class="childInput" type="text" /> <div class="sibling"></div> </div> I want to change the appearance of the parent/siblings when …

Read More