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

[the-ult]

Seems to be working :-)

Thanks!

[matsko]

Just a note, this is still happening with Safari and IE10. However, a PR fix is ready: #6459

[matsko]

This fix has been merged: e71e7b6

[the-ult]

Thanks Matias.
Great work!

--- Original Message ---

From: "Matias Niemelä" [email protected]
Sent: February 26, 2014 11:10 PM
To: "angular/angular.js" [email protected]
Cc: "The Ult" [email protected]
Subject: Re: [angular.js] ngAnimate causes reset (flicker) with ng-view and animate.css in Firefox (#4225)

This fix has been merged.e71e7b6

---

Reply to this email directly or view it on GitHub:
#4225 (comment)

[mparisi76]

Hi, I am struggling with a flashing popover in Safari Version 5.1.10 (6534.59.10) Mac OS X 10.6.8. I have read through these comments but I'm a little confused. Was this supposed to have been fixed at this point? I'm running:

AngularJS v1.3.0-build.2488+sha.3f2d756
Angular Animate v1.2.15-build.2399+sha.ca4ddfa

I don't know if there is something I'm supposed to be doing via CSS but I've been trying to get this to work for too long. Could someone let me know what the latest is? Am I using incorrect libraries?

Thanks in advance.

[loadedsith]

I ran into this after using an animation, specifically: animation: fadeIn 0.5s both ease;

Removing "both" solved my flickering issue.

I used both to begin with because of this article about animating ng-views.

more about both from MozDev

using: angular-animate & angular 1.2.16;

[obiddle]

Instead of display:none & display:block, try visibility:hidden & visibility:visible. display:none changes the done while visibility only causes a re-paint.

[bianchimro]

@obiddle solutions works for me, using visibility stops flicker.
I am using angular 1.2.17 bundled with ionicframework.