ngAnimate causes reset (flicker) with ng-view and animate.css in Firefox

[the-ult]

Angularjs: 1.2.0-rc2 & rc1

When I use ngAnimate with animate.css on ng-view it causes some sort of reset after the animation. Which results in a flicker.

Firefox (23.0.1):
http://plnkr.co/edit/BFzq7Gt4KAJlhSGqskIb?p=preview

In Chrome, IE10 and Safari 5.1.7 the animation works without any problems.

Same thing seems to happen with ng-repeat;

[the-ult]

Fixed with 1.2.0-rc.3

Thanks

[matsko]

Good stuff :)

[the-ult]

@matsko
The same problem seems to occur in angularjs 1.2.2 and up (1.2.1 works fine).
Problem now occurs in Chrome as wel.

See updated plunker:
http://plnkr.co/edit/AUKirQOqrOeLby8auahp?p=preview

[austencollins]

The same problem occurs in 1.2.4 as well. ng-cloak does nothing...

[matsko]

Thanks for the plunkr link. Looking into it...

[miemo]

Similar flicker is visible also on iOS7 Safari, and hence also in Phonegap-based apps. V 1.2.4 of Angular.

[matsko]

The flicker effect occurs because the keyframe animation is delayed until after the reflow starts, but since this is an enter animation that is going on here, the element shows up temporarily. The thing to do here would be to allow the animation to run for 1ms (so that the 0% animation keyframe styles get applied) then pause it and continue after the reflow. The only problem is that the stagger delay gets assigned after the reflow and there is no way in JavaScript to reset a CSS animation without causing a reflow to happen.

I'll need to look more into this. The solution now would be to hide the element during the .ng-enter animation.

Add this into your CSS code

.slide-animation.ng-enter { display:none; }
.slide-animation.ng-enter.ng-enter-active { display:block; }

And you'll notice it works: http://plnkr.co/edit/ad129EUZUe2wjgKcEaon?p=preview

[the-ult]

Thanks @matsko .
You're fix works perfectly for now.

Hopefully there will be a nice permanent fix in the future.

[matsko]

At the moment there isn't an easy fix. Maybe with 1.3 this could be changed, but it just needs a good explanation in the docs. Closing for now.

[matsko]

Great news! I think we have a working fix that doesn't request the extra CSS code: http://plnkr.co/edit/ULgte53dNhP64mXdmzOx?p=preview