ngAnimate breaks ngRepeat when using custom transitions since 1.2.13

[shql]

In reference to v1.2.13 and the following change:

$animate: ensure $animate doesn't break natural CSS transitions (4f84f6b, #6019)

We stepped over the following problem:

1. Include ngAnimate in your module
2. Use ngRepeat to fill a table
3. Add css transition to the repeated element (tr)
4. Add a simple filter to increase / decrease number of elements

Result:

• ngAnimate gets stuck with random elements (elements do not disappear, duplicates appear again)
• Hovering with the mouse makes the element disappear

Plunker: http://plnkr.co/edit/4y53HAnTerFmSTFNS2cU

[shql]

(Moving the transition to a pseudo class like ":hover" works as a workaround)

[Narretz]

Strange: when you filter the list, and some items remain, and you hover over the items, they finally disappear

[matsko]

This is pretty severe. Thank you for pointing this out.

[matsko]

The problem lies with tr. Since it's not a tangible element in HTML. If you move it to td then problem goes away. Although I'll need to test this further to see how ngAnimate deals with the tr element upon enter.

[matsko]

http://plnkr.co/edit/cx4JUioBxMpubx8f4Ohm?p=preview

[Narretz]

@matsko The problem seems to appear when the transitions are directly on the ng-repeat, tr or not:

http://plnkr.co/edit/Lf7jMUS9gEZopdS298RZ?p=preview

[matsko]

Ahh excellent. I'm taking a look.

[matsko]

OK we have a fix.

$animate uses CSS events to capture when animations end, but it also has a fallback timeout to capture elements that never animated in the first place. This is exactly what is happening here. The closing timeout didn't get all the elements collected properly to close. The reason, however, why your code is relying on the timeout instead of CSS events is because no animation is actually getting triggered. You need to use setup transitions or keyframes for the .ng-enter, .ng-leave .ng-enter-active, .ng-leave-active states. There is unfortunately no way for $animate to detect if a CSS class is defined, so the closes thing you can do is element.ng-animate { transition:0s none; } if you want to skip an animation entirely enter/leave/move.

Either way this is a bug and thank you for finding it.

[Narretz]

Good to know that it is fixed, @matsko! Just wondering, isn't ng-animate supposed to completely get out of the way when transitions (and animations?) are defined on element without having the relevant ng-animate classes? Or does it work differently?

[matsko]

.ng-animate is just a CSS class that is attached to each element during an animation. If your element already has a transition (say for a hover or a natural CSS animation) then it will get inherited into the enter, leave, move, addClass, removeClass animation and ngAnimate will assume that your element will animate. So if you want to avoid that from happening when you don't intend to have a CSS ngAnimate-enabled animation render on element then just use .ng-animate to override the CSS transition styles.

[shql]

That's what I thought as well. Especially because it worked before 1.2.13.

Thanks a bunch @matsko!

[Narretz]

Oh, okay thanks @matsko. I see now that the animation code runs regardless of the animations defined, because it can't figure that out beforehand.

[matsko]

Yes. The JS API for detecting animations is very limited. Hopefully it will change soon.

[quantizor]

Side note - TRs are very finnicky x-browser in general, and I'd recommend using multiple TBODY tags instead as they render correctly but still preserve the structure you're probably looking for. I ran into a similar issue for a mobile implementation a month or two ago.

[shql]

Appreciated. :)

Am 25.02.2014 um 05:36 schrieb Evan Jacobs notifications@github.com:

Side note - TRs are very finnicky x-browser in general, and I'd recommend using multiple TBODY tags instead as they render correctly but still preserve the structure you're probably looking for. I ran into a similar issue for a mobile implementation a month or two ago.

�
Reply to this email directly or view it on GitHub.