Prevent angularjs animations from an element that is initially hidden when loading

Question

http://codepen.io/cflynn07/pen/hbgxf
^ Example

I have an angularjs animation, and I don’t want it to run on page load for an element that needs to be hidden.

An element is currently displayed, then a slide animation takes place and hides the element.

Answer 1

Is this what you are looking for?

http://codepen.io/anon/pen/JaHKL

Basically, you need to set style="display: none;" to declare the initial state.

Otherwise, the initial state will be display:inline , and when AngularJS reads data-ng-show="false" , it will trigger your hide animation to fit your settings.

Hope this helps.