In this post I would like to share my experience on trying to do animations with AngularJS and how I managed to finally get it done.
So when I first started with my project and decided to have animations for my project, I referred here and included the ng-animate directive and corresponding CSS rules for ng-enter and ng-leave attributes. But I didn’t see any effect. Then after resolving my issues regarding animations with AngularJS, I finally got it working. I’ve done a small write up of everything you need to get AngularJS animations working.
What are all required?
- AngularJS 1.2.9 or less – Having a higher version of AngularJS might bring up dependency issues.
- Angular Animate – preferably the same version as the included AngularJS library.
- Animate.css – For view transition and ng-directives.
Include the ngAnimate dependency for your app –
Download the script files and include them in the index.html file –
Download animate.css stylesheet from the above mentioned link and include it in index.html as well-
Use the view and ng-directive animation effects by including the respective classes –
This got animations working for me with Angular and hope it will help you too.
For more details on how to add specific transitions or animation effects to views and other directives I would recommend referring to the angular documentation on animations.
