Changes in animation's behavior starting from 1.4.7

[havenchyk]

Hi,

I've recently updated from 1.4.3 and found changes in the animation's behavior.

My code is something like this, nothing specific:

<div ng-if="var1">
  <div ng-show="var2"></div>
  <div ng-if="var3"></div>
</div>

But what I see after update starting from 1.4.7 is random flickering on the nested ng-if.

I'll try to provide an example, but could anyone review this issue and say, is it a bug or just undocumented changes in the behavior?

I can debug only changes in data-ng-animate attribute: they are 1 and 2. Also I don't see any animation specific classes on the divs, like ng-enter, ng-leave etc

[Narretz]

Can you please post a plnkr.co etc. that shows the problem? We've fixed a lot of bugs in ngAnimate, but there's also a known issue with nested animations.

[Narretz]

You should also see if the problem persists in 1.4.9.

[havenchyk]

The problem persists in all the versions after 1.4.7, including 1.5.0-rc1

[Narretz]

@havenchyk Ok. Please try to get a working demo running.

[havenchyk]

@Narretz unfortunately I haven't been able to pull the example from my application, but it looks like that the problem is similar like described here https://docs.angularjs.org/guide/animations#preventing-flicker-before-an-animation-starts

So, I've added styles for ng-enter-prepare and ng-leave-prepare and now things are better, but I get some flickering even after this workaround.

Maybe guys you can advice, how to debug angular animations and for what things I need to take a look, I'd like to help, but don't know how.

[havenchyk]

Ok, here is something similar that I have. If you click on the button, you will see "jumps" down of the button. ng-enter-prepare solve the issue with flickering of the color, but it doesn't work for block elements, so div elements will try to jump in this case.

@Narretz is it enough? /cc @matsko

[Narretz]

This is a result of ea8016c, which went into 1.4.5. As of now, this is expected behavior, unfortunately.
Applying display: none only to the enter animation removes the flicker: http://jsbin.com/diwixeziba/1/edit?html,css,js,output
This makes sense. The enter element is added to the DOM, and because it's a child element, the regular display: none is only applied after an animationFrame. So there's a very short time frame where the element is visible, even though it shouldn't be. With leave, we don't have this problem, because the element is already there. Probably should make this more clear in the guide.

[havenchyk]

@Narretz heh, it solves my problem. It would be great if you could add details to the guide, it was unclear for me before your comment.

Thanks!

[havenchyk]

BTW, I still have flickering even after display: none. Animation disabling with $animate.enabled(element, false) solves the problem, but it's a workaround as well.

[Narretz]

@havenchyk Which browser is that?