ng-Fx – A simple way to add beautiful animations

Advertisement

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.

css-animation

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>

Live Preview    GitHub