ngAnimate/ngRepeat issue with duplicates and transitional classes

[jrencz]

I'm aware this issue can be somewhat project-related when it comes to styles, but anyway I find it strange enough to address an issue here.

Please take a look at this screenshot:
http://img43.imageshack.us/img43/3544/lwaj.png
on this screenshot you'll find an issue with duplicated elements in ngRepeat.
There are 3 elements in collection passed to ngRepeat.
As you can see 3 original elements are on top, but there 3 duplicates with ng-animate ng-leave and ng-leave-active classes as well.

With ngAnimate disabled it does not occur

[matsko]

Can you provide your CSS animation code? It might be that the transition style is placed in the wrong area causing the animation to last forever.

[jrencz]

the only animation-related code for those particular elements is:

div {
   opacity: 1;
   transition: opacity .2s;
}

when dark stripe is open (stripe is animated)
and

div {
    opacity: 0;
}

when it's hidden

[matsko]

So the problem here is that you're placing your transition code on the DIV element. Please place all transition code on the .ng-EVENT class.

So in your case:

div.ng-leave {
   opacity: 1;
   transition: opacity .2s;
}

And

div.ng-leave.ng-leave-active {
    opacity: 0;
}

ngAnimate may hang if the transition is placed elsewhere.

[mgol]

@matsko The problem is those animations were not meant to be parsed by ngAnimate. We can have many such things in the app just because in many cases ngAnimate is not needed to create working transitions. However, ngAnimate seems to intervene in all situations where there's a transition present which creates such problems.

In other words, it seems that just including the ngAnimate dependency in the app that has transitions working correctly can break the application. This makes it much harder to seamlessly & gradually integrate the module into the codebase.

Couldn't the code be changed so that ngAnimate ignores an element if its classes don't have ngAnimate-like classes styled with transitions?

[jrencz]

it works, thanks a lot!

I leave it to you to decide if there's an issue or not and close this one.

[matsko]

@mzgol it does that already though. If you have any animation code on the element at the time of the animation (and that animation code is not defined inside of the ng-EVENT class) then it ignores the animation. The bug in this issue relates to that, but the question is that how did that example manage to get into the animation in the first place. Is there anything else we should check for? Perhaps the animation checking code isn't working 100% of time.

[jrencz]

@matsko I don't have an answer for you right away. I'll check for it tomorrow, when I have more time.

[matsko]

@jrencz no rush :)

[matsko]

@jrencz any progress on this?

[jrencz]

@matsko I'm sad to admit but none. I wrote your solution works, but it's not: I just didn't remove a patch hiding elements with ng-leave-active class.
They're still there.

[jrencz]

@matsko I found a solution in animate.
I'm preparing PR now

[matsko]

Very nice!