[ngAnimate] ng-move classes are not always being removed

[OverZealous]

I've created a sort of contrived example, but the .ng-move and .ng-move-active classes are not consistently being removed if the animation gets interrupted.

jsFiddle showing problem: http://jsfiddle.net/9736t/
Click Start / Stop once, wait for a second, then click it again to see the issue. Continuing to start and stop the process will exacerbate the problem.

In the example, the code randomly resorts a list. Whenever an item is moved, it receives .ng-move classes to highlight it. However, the resorting occurs faster than the animation, and sometimes the .ng-move classes are not removed. If the .ng-move classes get stuck, they are no longer added or removed at all. Eventually the entire list is stuck in the .ng-move.ng-move-active state.

This worked correctly under rc.2, with the same code.

This was tested on a Mac under Firefox, Chrome, and Safari, with consistent results.

[matsko]

Everything looks correct with what you have. Looks like ngAnimate is just not catching things quickly enough.

Looking into it...

[realityfilter]

I do see the same problem wit ngView animations. If you change views in the middle of the animation you end up having two ngView elements in the dom. One with ng-leave ng-leave-active classes attached.

This leads to a couple of problems. In our scenario it even crashes mobile safari with:
UIWebOverflowContentView: 0xb2a0480; frame = (0 0; 0 0); transform = [0, 0, 0, 0, 0, 0]; alpha = 0; layer = (null)) with a nil layer. This view probably hasn't received initWithFrame: or initWithCoder:.'

I am having this problem with all 1.2 release candidates.

[matsko]

@realityfilter can you please provide me a plunkr link as well?

[realityfilter]

Here is a plunkr: http://plnkr.co/edit/11uvtolZrQHCbQnXArxb?p=preview

If you navigate during an animation you will see multiple ngViews.
Unfortunately this does not trigger the mobile Safari crash like in our app.

[matsko]

@realityfilter to confirm, the problem is that it's not cancelling DURING the animation right? So you have multiple items at the same time. It gets cleaned up eventually though.

@OverZealous I'm looking into your problem as well.

[matsko]

@realityfilter the bug you're experiencing is due to the ngAnimate-animate.css driver ... not ngAnimate. I just fixed the issue with that driver so please upgrade that one for the time being.

[realityfilter]

That was exactly my problem. Thanks for the fix. It works seamlessly now.

[matsko]

Waiting on PR #4435 to get merged. Thank you for pointing out this bug. It was tricky to find and it was super important that it was discovered.

[OverZealous]

Great, glad I could help, even if it was only in finding the bug!