Closed caitp closed 10 years ago
@matsko can you please take a look?
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.
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.
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
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
.slide
on the element which has no transition styling..ng-hide
on it. No animations are run on start up.when the show animation runs
.ng-hide-remove
animation..ng-animate
is applied to the element and then $animate detects that it has some transitions on it..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).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
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.
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.