Ng-class
The angularjs ngClass directive allows you to set CSS classes on an HTML element, dynamically, by databinding an expression that represents all classes to be added.
Ng-show
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute
Others
| Example |
|---|
|
Basically what i did was remove things like ng-hide ng-show from the elements that were supposed to have animation and instead i ve put ng-class to manipulate the visibility while maintaning the animation;the reason that ng-hide ng-show aren t the best ideas for animation is that they apply display block property to your element thus any transition applied to them will not work from question Angular 1.x ngAnimate in Shadow DOM doesn't register animation times or add enter/leave classes |
|
Edit as mentioned by chandresh using the ng-show directive with a true false value would be a better option than using ng-class from question HTML styling while Angular JS is loading |