na

nz-animate

Sickly simple animations for AngularJS -

Showing:

Popularity

Downloads/wk

0

GitHub Stars

84

Maintenance

Last Commit

6yrs ago

Contributors

4

Package

Dependencies

12

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

nzAnimate

Join the chat at https://gitter.im/nozzle/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

  1. $ bower/npm install nz-animate --save
  2. Add nzAnimate.min.css or nzAnimate.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

  1. Lessen the size of the default build. (See Issue Here)

All PR's and contributions are more than welcome!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial