Ng-show ng-hide visible when view loads?


I’m not sure my title explains this very well, but anywhere in my app I’m using ng-show, ng-hide or ng-if to conditionally hide content I can briefly see the content before it is hidden. For example I’m using ngMessages along with ng-show to display form validation information when appropriate:

<div class="error-container last-error-container" ng-show="signupForm.$error && signupForm.$submitted" ng-messages="signupForm.$error">
          <div ng-messages-multiple ng-messages-include="templates/error-list.html"></div> 

When I go to the view which contains this for the first time I can briefly see this error container before it disappears.

I have switched to a mac to test the app out in iOS and also added the native transition plugin so I don’t know if it’s coincidental that I have noticed this at the same time. Even if I set a variable to false in the controller and use it with ng-show I will briefly see content.

It feels like there is an animation or timeout in effect on these element which take a while to kick in but I don’t see where this occurs, I found a bit of css on stack overflow related to ngAnimate and applying display none !important to overwrite any css animations I guess, but that didn’t help.

Has anyone else experienced this? Am I doing something wrong? Any advice would be appreciated, thanks!

1 Like

I had the same problem once. so to resolve it you used ng-style with { 'display': 'block' } to show it or { 'display': 'none' } to hide it.