1.2.0rc1/rc2: Animation occasionally flickers back to start position

[joewhite]

I'm using ng-class to trigger a CSS keyframe animation in Angular 1.2-rc.2. Sometimes, the animation will run smoothly to completion, and then, for a tiny fraction of a second, will jump back to its start position, then jump right back to the end. So instead of animating smoothly from 0 to 100 and then stopping, it sometimes animates smoothly from 0 to 100, jumps back to 0 for a few milliseconds, then jumps back to 100.

Here's a sample, with the animation repeating over and over to make it easy to see the glitch: http://plnkr.co/edit/hI9GXkXhIjqKAsmauCSK?p=preview

The plunkr uses Angular 1.2rc2. I see the same glitch if I use rc1.

In Firefox 23 on Windows, I see the glitch happen more than half the time. In Chrome 29, the glitch is much rarer, happening on average maybe one time out of every 50. I haven't observed the glitch yet in IE10, though it could just be rare like it is in Chrome.

[petebacondarwin]

I suspect this is a bug in the CSS3 animation. Can you reproduce without angular?

[petebacondarwin]

Without angular we can do this: http://plnkr.co/edit/MBb8fQSTzVbDF0VONnmY?p=preview

[joewhite]

I don't see any glitching in your non-Angular example, so it is an Angular problem.

The doc comments for addClass in angular-animate.js say that, after the animation completes, Angular first removes the -add and -add-active classes, and then adds the unadorned class name. So there's a short window of time where the element doesn't have any classes (the comments even call this out explicitly as step 7), and that's probably where the glitch is coming from. Is there any reason it does things in that order? It seems like it would make more sense to add the class first, and then remove the -add variants.

[tanx]

+1

Not sure if this is the same Problem, but I also notice flickering when changing the css class of a list item after an ngTouch event.

[matsko]

@joewhite @tanx can you guys test this out with the current master? There were some timing changes committed early on just after RC2 was released. Just clone the repo and run npm install + grunt package and use the contents under build/ as your JS files.

I don't see any issue with changing the order, but let's be 100% sure first.

[tanx]

Hi. Thanks for the quick response. I tested the current master on iOS7/PhoneGap and it still flickers after changing css classes.

[joewhite]

When I ran grunt package, it wasn't able to minimize the JavaScript files:

Running "minall" task
Error occurred during initialization of VM
Could not reserve enough space for object heap
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.
(repeat previous four lines several times)
Warning: Error minifying build/angular.js Use --force to continue.

Aborted due to warnings.

But it did build the non-minimized files, so I snagged those and tried them. And they worked like a charm -- I couldn't see any flicker in either Firefox or Chrome.

So it looks like this issue is fixed as of commit e275129, at least as far as Windows goes.

[petebacondarwin]

Great stuff @joewhite. Closing this issue as it appears that this commit fixes things.
@tanx - if you still have problems can you open a new issue?
Thanks

[AmritKaur2014Matharu]

I want to give information about the location of util.js which is lib/grunt/util.js not lib/util.js. It will save time of other developers.

[matsko]

@AmritKaur2014Matharu please open another issue since it is not relative to this one.