AngularJS has integrated a seamless animation library into its core. The ability to separate all animation logic from individual directives is very orthogonal and nonevasive. All animations in AngularJS are based around CSS classes. The two main types of animations that can be achieved are as follows:
CSS-based animations
JavaScript-based animations
Each of these types of animations has their own specific use case. CSS animations are best used for simple, data-driven animations that need to offer fast-appealing transitions. JavaScript animations are best for more advanced types of animations. These advanced animations work seamlessly with animation factory functions.
To support animations in an AngularJS application, all that is needed is the ngAnimate
module and custom animation declarations. These declarations can either be placed in JavaScript or CSS. This allows for a very nice decoupling between DOM and animation logic.