npm install ng-fx
ng-fx
> animation library for angular
Overview 
ng-fx is an angular implementation of the popular Animate.css using the new
$animateCss service in angular. This is the core and foundation, but there is room for so much more. You can use these css animations dynamically with zero setup. So you get the best of both worlds (css vs js animations). Take a look and enjoy.Getting started
Installing
ng-fx requires
ngAnimate >=1.4. Previous versions of ng-fx <2.0 support earlier versions of ngAnimate, but dev support is lacking there. If you would love to help maintain, let me know!using npm
* npm i --save ng-fx
`` javascript`
angular.module('app', [
require('ng-fx'),
require('ngAnimate')
])
Using animations
ng-fx makes it so simple to use animations by tying into ngAnimate
and all the hooks it provides.$3
After installing ng-fx, using the animations are as easy as declaring css classes on elements.
`html
`
Few things happening here. First, we must tie into animations from , in this case we're attaching an animation to the enter and leave hooks of ng-if. Next we declare the animation type by using the fx namespace followed by the animation name (fx-fade-normal). Place this in the class of the element. That's it. ng-fx has an api to adjust the animations' speed, ease, and to stagger or not. Here's a list of all the animations ng-fx supports$3
ng-fx looks like innocent css animations. They are ran like css animations (performance!!!) but they are indeed dynamic like js animations as well. Here's how we can adjust the speed of an animation.
`html
`Using the
we can control the speed of said animation. So the following are all equivalent.
* fx-speed-230
*
* $3
html
class="fx-fade-up fx-ease-sine">
`
Using will apply the given curve to the animation. Here is a list of all the curves ng-fx supports$3
With ngAnimate 1.4, we now have support for staggering outside of css animations.`html
class="fx-rotate-up-left fx-stagger-245">
`
Using
on an animation in ng-repeat will stagger those elements with the given delay in between.$3
All help is welcome! ng-fx is an ongoing and live project. If you'd like to add more animations or support new feature, open an issue and even submit it yourself. If you're new to open source, I'll help you get your first commit in, ping me. To get started make sure you have...*
node >=0.12
*
* If you're good there, then...
*
* your fork
* cut a new branch
* npm install
* This will compile and build the project. ng-fx uses
, webpack, and gulp, nothing else too fancy here.There is a demo app to try out the animations.
Most the commands you'll need are baked into
npm
*
* builds and outputs regular and min src code
*
* run test
*
* run build and watch for changes to rebuild, launches the demo app and refreshes that on change.Some helpful commands in gulp
*
* call this command with a new animation name and it will create all the boilerplate in the We use ,cough, try to use the angular contributing guidelines