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!

[jrencz]

@matsko I pushed it a little too soon and it breaks tests. Im on that

[jrencz]

@matsko It's sad to admin but my change just disabled some of animate functionalities, which I dod not notice untill run tests, instead of fixing this one.
As for now I'm convinced this one remains unsolved

[jrencz]

I think if it should be mentioned in docs that not setting transition on .ng-animate itself can cause some problems.
Setting it does not solve a problem in this case (solves one of other ngAnimate-related ones in my project)

[matsko]

@jrencz have you been setting an animation on the .ng-animate class? That was only added in RC3 and there is no mention of it describing for it to be used as a transition class.

[jrencz]

I did use .ng-animate after reading animate() code: I set non-zero transitionDuration and it solved another problem I had with animate (not reported as a here on github but it also was about temporary classes left forever). But setting the same property here did not help.

As I mentioned before I patched this bug - wherever it is: in my app or in animate - with display:none. Yesterday, when I checked if setting transitionDuration on this one helps i noticed another thing:
As I wrote first: after animation 3 items are duplicated: there are 6 of them. But I never tried to run animation many times. I get new set of items after each run: 9, 12, and so on.

[matsko]

Here's what I think is going on. Somewhere in your CSS code you have an enter/leave even that has display:none set to the style and this makes the transition styles never complete which makes it hang. This causes there to be double the amount of elements (100% of the items entering + 100% of the old items leaving).

Animating the .ng-animate class is a no no. It will cause your animation never to happen at all. The CSS class is only there to cancel a collection of animations when a parent element performs an animation.

Can you post all of your CSS code surrounding these elements caught in the blocking animation?

[mgol]

@matsko Check your e-mail. :)