The other day I used ngAnimate to animate adding and removing DOM elements with the ngRepeat directive. This time I wanted to create a demo that used ngAnimate to animate ngView. The demo can be found here, and the source code can be found here.
I used an object syntax to let ngAnimate know about the styles I wanted to use for the enter and leave animations.
Here are the css transition styles:
According to the documentation we should be able to set the value of a property on $scope in order to change the type of animations we wish to use dynamically. This would be ideal if you wanted a view to slide in one direction for navigating to the next page, and another for navigating to a previous page. This doesn’t seem to work in practice, and it could be an error on my part. I also wasn’t able to get ngAnimate to work when I used the object syntax with ngRepeat, but I intend to revisit my demo for that feature and make sure I was doing things properly. I’ll talk about setting up markup structure for animating ngView in a future post. That was a little bit trickier than I was expecting it to be.