Velocity UI integration for AngularJS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
.jshintrc
Gruntfile.js
README.md
bower.json
package.json
velocity.ui.angular.js
velocity.ui.angular.min.js

README.md

velocity-ui-angular

Velocity UI Pack integration for AngularJS. Combines the power of ngAnimate with the performance and simplicity of Velocity's UI Pack!

Requirements

Quick Start

  • Install via bower:
$ bower install velocity-ui-angular --save
  • Add the velocity.ui module to your application:
angular.module('yourApp', ['velocity.ui', 'ngAnimate']);
  • Use the class names on the elements you wish to animate using ng-repeat, ng-if, ng-show, ng-hide. E.g.:
<div ng-repeat="item in items" class="velocity-transition-slideDownIn velocity-duration-400">
	{{item.name}}
</div>

Durations can be set on an individual basis by using the velocity-duration-400 class, where 400 is the animation duration in milliseconds.

Setting Default Options

The following options can be configured via ngVelocityConfig:

duration

Type: String|Number

Default: 300

To configure velocity-ui-angular globally, set it via your applications config block:

angular.module('yourApp').config(function(ngVelocityConfig) {
    ngVelocityConfig.duration = 1000;
});

Credits

Major credit goes to @julianshapiro for creating VelocityJS which makes this wrapper-library possible.

  • @hendrixer for providing the base for CSS class-parsing code
  • @cgwyllie for providing the base for generating the 'opposite' animations