Velocity UI integration for AngularJS
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore chore(release): 0.0.5 Jul 4, 2014
.jshintrc
Gruntfile.js Migrate to new repo Jul 14, 2014
README.md Update bower dependencies Mar 10, 2016
bower.json Update version Mar 10, 2016
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