Animate ngView transitions in AngularJS
Let me just start this post by saying that AngularJS is awesome! I have been playing with Angular recently and I must say that it has the things I loved in Flex and I missed in JavaScript frameworks. Things like declarative UI, bi-directional binding and a lot more, but now I will not write why Angular is cool.
This post will be covering something that I recently wanted to implement, but it seemed that it not so straight forward – animating ng-views when they change.
An example of such transitions you can check here http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView#animations . As you can see when you click on a link, the view is changed by making this slick slide animation. One thing that we notice is that the view is sliding only in one direction, but it will be really nice to have it both ways, based on the hierarchy of the views.