AngularJS and CSS Transitions

Question

I am new to AngularJS and I've learned quite a bit in the last few weeks, however I have several questions. So currently I have a jQuery prototype that I would like to convert to use AngularJS. For any animations or page transitions I am using css transitions. To change pages, I am changing the body class with jQuery which in turn animates elements on or off the page.

In AngularJS, views are displayed and removed with no animation at all. The way I need it, some views would use some elements from the last view.

For example, there is a start view and a search view that contains a search input field that animates. When the page is loaded, the start view is loaded. When the user clicks submit, it would then load the search view but the search bar should stay there and animate to the top for future searches.

I am somewhat confused as to how to go about doing this. Any suggestions?

Answer 1

When possible use the unstable / development versions of angular.js. (There are pretty stable).

The newest have an ng-animate directive which is usable for the most use cases.

Also there is nganimate.org with a lot of examples and there this article and this one which should get you started.