nzAnimate
A sickly simple class-based library for Angular animations.
Built on Animate.css and animate-stylus, nzAnimate not only provides the regular functionality of Animate.css, but also provides easier classes for Angular animations on directives like ng-repeat (ng-enter, ng-leave), ng-hide, ng-show, or any other directives that leverage the ngAnimate module.
Awesome Demo
Installation
$ bower/npm install nz-animate --save
- Add
nzAnimate.min.css
ornzAnimate.css
(For custom Builds, see below)
Usage
Plain ol' Animate
<div class="animate bounceInDown"></div>
Show / Hide
<div class="animate enter-bounceInDown exit-bounceOutUp" ng-show="isShowing">Stuff</div>
Replace bounceInDown
or bounceOutUp
with any animation you see in the demo.
Animation Speed
<div class="animate enter-bounceInDown exit-bounceOutUp speed-300" ng-hide="!isShowing">Stuff</div>
Default Speed: 700ms
Out of the box, nzAnimate supports any speed from speed-0
to speed-4000
in increments of 50
.
Enter, Exit & Stagger
<div class="animate enter-bounceInDown exit-bounceOutUp stagger-100" ng-repeat="thing in things"> {{thing}} </div>
Out of the box, nzAnimate supports any stagger from stagger-0
to stagger-1000
in increments of 50
.
Put it all together...
Using all of these together, everything will animate on creation, exit, re-entry, show, hide, move, etc...
<div class="animate bounceInDown enter-bounceInDown exit-bounceOutUp speed-500 stagger-100" ng-repeat="thing in things"> {{thing}} </div>
Custom Builds...
Simply edit /src/config.hjson
to your liking!
Hint: For a smaller file size, limit animations to specific ones you'll use.
{ speed: { default: 1000, start: 0, end: 6000, increment: 100 }, stagger: { start: 0, end: 500, increment: 25 }, ieSupport: true, vendors: ['official', 'webkit', 'moz', '...'] animations: ['bounceDownIn', 'bounceUpOut', '...'], }
Then: $ npm install
$ gulp build
Roadmap & Contributing
- Lessen the size of the default build. (See Issue Here)
All PR's and contributions are more than welcome!