ng-Fx is a s simple way to add beautiful animations to your angular apps. Animations based off animate.css. All animations are built in JavaScript.
ng-Fx does not rely on CSS for animations. This allows it to be dynamic and able to adjust on the fly. The only predefined CSS classes are the animations and the easings. ng-Animate allows ng-Fx to create JavaScript based animations, so the classes do no correspond to a style in a CSS file.
Using:
All animations are used with ng-animate. So you can apply them to…
– ng-hide / ng-show
– ng-include
– ng-if
– ng-view
– ui-view (if you’re using ui.router)
– ng-switch
– ng-class
– ng-repeat
Adding the animations are as simple as adding a css class. ng-Fx uses the ‘fx’ name space. Here’s an example using a fade animation. The list items will enter / leave / and move with the ‘fade-down’ animation.
<ul ng-init="foods=['apple', 'chips', 'muffin']">
<li class='fx-fade-down' ng-repeat="food in foods">
{{ food }}
</li>
</ul>
