Animations with Angular
aka ngAnimate
Objectives
- Explain what ngAnimate is
- Explain why we would use ngAnimate over CSS/JS
- Describe what ngAnimate allows us to do
- Implement animations quickly using animate.css
Things to Remember
ngAnimate is a dependency
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
angular.module('myApp', ['ngAnimate']);Things to Remember
Why do we use it instead of CSS/JS?
- We want to do things the Angular way
- 'update model to change to the view' - Mat Brown
- Improves cross-browser support
Things to Remember
How does it work?
- Gives us access to 'special' Angular CSS classes like .ng-enter, .ng-leave, etc.
- Will add and remove CSS classes to different Angular directives based on if they are entering or leaving the view.
- Triggered by directives
Things to Remember
OMG, do I have to write my own animations? How...
Relax, you don't have to if you don't want to.
A dude named Daniel Eden has already done a lot of that work for you. Check out animate.css