$animate.addClass difficulties and / or glitches

[caitp]

http://plnkr.co/edit/CGgL13QsEwnwv9D1shG1?p=preview is an example of the reason for this --- it's very hard to have different animations for the showing and hiding of the content, and causes some glitches.

For my use case, I don't want to remove nodes from the DOM, so ng-switch or ng-if are not really applicable (it's important, otherwise I end up losing playback position of media content).

If there's a way to get the $animate.addClass behaviour to behave similarly to $animate.enter/leave, that would be great.

I'm not totally sure where to poke at that though, and it's entirely possible that I'm getting this wrong due to not being a CSS guru. But if there is a good way to do this for addClass, it should probably be included in the documentation.

Let me know if I'm being a complete idiot here :> This issue probably only really applies to ngShow/Hide, due to their use of the ng-hide class which seems to cause this issue.

[IgorMinar]

@matsko can you please take a look?

[matsko]

Fixing https://github.com/angular/angular.js/issues/5588 first since it introduced three strange bugs with ngShow/ngHide and $animate. It might put a dent into this one when fixed. Almost done with that one.

[matsko]

Here's the working version of your code -- without a flicker: http://plnkr.co/edit/IHrPITen0MGijczkx7vL?p=preview. I agree that the ngShow/ngHide restrictions do make things difficult. Let's resume once the other issue out of the way.

[caitp]

ahh, I had tried many different combinations, I guess I missed that one. Might be useful to show an example of this in the ngShowHide docs

[matsko]

Just fixed https://github.com/angular/angular.js/issues/5588. It doesn't fix or relate to your issue. But your CSS code for the original example is incorrect. Let me explain why.

when the page loads

• Your element starts off with a .slide on the element which has no transition styling.
• The element is hidden and therefore has .ng-hide on it. No animations are run on start up.

when the show animation runs

• The ngShow expression changed and then it triggers the .ng-hide-remove animation.
• .ng-animate is applied to the element and then $animate detects that it has some transitions on it.
• Animate adds .ng-hide-remove and waits 10ms for the reflow to kick in. The CSS classes at this time on the element are .slide .ng-animate .ng-hide-remove .ng-hide, but since you defined that .ng-animate.ng-hide sets display:block then the element shows up for 10ms (the flicker effect).
• Then, after the 10ms gap, .ng-hide-remove-active is applied and .ng-hide is removed. It then waits 666ms to animate the element from the translate style of 9999px to ???? (nothing since the translate style doesn't change). After 666ms (actually after the 999ms timeout that ngAnimate sets to close off all animations) then the .ng-hide-remove and .ng-hide-remove-active classes are removed and then the actual animation kicks in to remove the 9999px translate which brings it back to the center of the screen.

when the hide animation runs

• This works fine.

So just an incorrect use of the classes. I agree that the class-based animations are complicated to use and should be much better documented. They could also be changed around in 1.3 or 2.0, but the docs are more important at the moment.

Closing this issue.