Animation Flicker

[andrelom]

I created a directive that uses the "ngShow" and "ngAnimate". When this directive is loaded by the first time, it appears and disappears (flicker).

Tried to fix by checking if the problem was in my code. I don't have idea if it is normal or not, but is strange.

For now, I fixed the problem by using the "element [0] style.display = 'none';".

In the "http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html", Matias talk about this (Animations are skipped the first time after a directive is compiled).

I read others articles about that, but I believe the "problem" still happens in Angular 1.2.

[matsko]

Aside from the yearofmoo article, can you provide the 1.2 animation code you're using that is causing the flicker?

[andrelom]

I cut some pieces of code from my application and made it ​​available at the Plunker. When the page is loaded, is possible see the effect (flicker) described above.

http://embed.plnkr.co/VEqZHmY9VhpdQkChxmvP/preview

[matsko]

The example wasn't fully useable, I changed a few variables so that the modal shows up when the page loads. Is this how it should function? http://plnkr.co/edit/YCd1l4HL9gw8Ummb9u3g?p=preview

[andrelom]

No. The modal should not open automatically, it should be hidden until the "modal open" event is triggered.
The page will take a while to start and the effect is really fast, but if you see, when the compilation is completed, the modal show and hide again. To repeat the error if it has not been possible to see run the code (stop / play) again, it was the only way I could illustrate.

http://embed.plnkr.co/VEqZHmY9VhpdQkChxmvP/preview

[matsko]

Ahh now I understand. From what I can assume it's that the modal template loading too soon and the animation starting. It could also be that it's trying to remove the ng-hide CSS class when it isn't actually there.

[andrelom]

That's it (... too soon modal template loading and starting the animation).

I changed the "templateUrl" property to "template", passing the template as a string, and the problem stopped happening.

http://embed.plnkr.co/VEqZHmY9VhpdQkChxmvP/preview

[matsko]

Very nice! :) Can I close the issue?

[andrelom]

Yep :/. But I still believe that this is still a bug, because all the custom directives that have CSS animation class (xyz-animate) in the main element, got a external template, and its default status is "display: none" (ngShow/ngHide) will have this bad behavior. I would like to help, but at the moment, I have no idea of where this error can be explored in the Angular.

[andrelom]

Hi,

I fixed the error as follows:

• I created a CSS class called "clear-animation", which has the property "transition: none important!;";
• I added it with the default animation class "xyz-animation";
• When the directive is compiled, I cut the class "clear-animation".

At the time it was the best alternative to solve the problem.

Note: The directive "ng-cloak" does not work in this case.

[matsko]

@andrelom what should we do next? I'm still working on another PR that fixes a flicker, but that is related to CSS animations. With the example here you're using CSS transitions.

The clear-animation property is not the way to go. It would better for us to get to the root of the problem. Now that some other blocking issues are fixed and in master I can retest this on 1.2.6. Can you provide the earlier plunkr example which has the broken flicker code?

[andrelom]

Hi @matsko I created the plunkr example.

http://plnkr.co/edit/ncXb8rU6Dw5wP13nRqW5

[andrelom]

I've been looking at the source code of the "angular-animate.js (line 291, v1.2.6)" and found this in "$animateProvider":

// disable animations during bootstrap, but once we bootstrapped, wait again
// for another digest until enabling animations. The reason why we digest twice
// is because all structural animations (enter, leave and move) all perform a
// post digest operation before animating. If we only wait for a single digest
// to pass then the structural animation would render its animation on page load.
// (which is what we're trying to avoid when the application first boots up.)
$rootScope.$$postDigest(function() {
  $rootScope.$$postDigest(function() {
    rootAnimateState.running = false;
  });
});

Replacing the piece of code with the current code below, the error has stopped.
I believe this function should be the last to be pushed to the "$$postDigestQueue" but I not found a better way yet.

$rootScope.$$postDigest(function() {
  // Just a "jerry-rig" :P
  $timeout(function () {
    rootAnimateState.running = false;
  }, 500);
});

I have little knowledge of the source code of ngAnimate, but reading the code and the comments, I believe the problem is at this point.

[matsko]

The issue shows up in your plunkr example, but when replicated locally it doesn't. My guess is that plunkr loads things slower than if you do it locally and that way everything downloads in time. Any idea how we can replicate this?