angular animate producing very slow behavior behavior on ng-repeat

[Joe Gaudet]

Hey All,

I have a table with about 200 rows generated by ng-repeat - which works just fine when I don't include the new angular animation stuff.

However when I do it causes a recalculate style per row of the table, which when it adds together slows down the rendering considerably. This is caused by removing the ng-enter class.

My template is here:

https://gist.github.com/joegaudet/6630295

Is there a way to disable animations for tables?  I don't have a single ng-enter or enter class defined in my project.

Any thoughts ? 

.joe

--

.joe out.

CTO & Co-Founder Learndot.

+1.778.994.4846

[Ivan Reese]

I think I'm experiencing the same issue. I'm rendering about 400 items in an ng-repeat, and simply including the ngRepeat module slows filtering the repeat to a crawl. I've removed all animated classes, and it's still sluggish. It seems to update one element at a time, taking about .3 seconds for each. If I wiggle the mouse around on the elements, they update faster.

[Ivan Reese]

Found the cause of my issue.

I had a css transition applied to an element inside my ng-repeat (a little glow on hover for an <a> tag). It wasn't attached to any of the classes related to angular animation, like ng-enter or ng-move. However, the presence of this transition causes extremely slow updates when filtering the ng-repeat.

[Ivan Reese]

To be clear: the transition was applied to the same element as the ng-repeat directive, not a child element. Wrapping the transitioning element in a container, and applying the ng-repeat to the container instead, solved the issue.