My question is similar to this and this , but includes new animations in AngularJS 1.2 0,0.
Basically, I have a bunch of elements on my registration page that are initially hidden and displayed only when a certain form element is invalid (they point to an invalid form element and display a message like "password must be at least 8 characters"). These messages disappear when they are displayed / hidden.
But as soon as the registration page is displayed, the elements are visible and disappear. They are briefly visible (they “blink” or “blink” on the screen, as in cases when an ng-cloak is required).
Here is a pluker to demonstrate the behavior that I am experiencing. In this plunker, I set the base route (the "login" page), which contains a field and a button that switches the visibility of the window. Notice how the window disappears when you press the start button? It should be just hidden. (I intentionally set the animation to slow so you can see the animation).
How can I stop the animation initially?
What I tried:
- Set
ng-cloak for animated elements. - Use
ng-cloak with the display: none !important rule added. (See this ) - The
display: none setting on the element, as if it were the "initial setting" for the element. (See this )
Interestingly, this plunker behaves correctly, and the animation does not occur initially. This plunger does not use routing, and the controller is installed explicitly on the body tag. However, I want to use routing.
source share