Velocity UI Pack integration for AngularJS. Combines the power of ngAnimate with the performance and simplicity of Velocity's UI Pack!
$ bower install velocity-ui-angular --save
velocity.ui
module to your application:angular.module('yourApp', ['velocity.ui', 'ngAnimate']);
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.
The following options can be configured via ngVelocityConfig
:
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;
});
Major credit goes to @julianshapiro for creating VelocityJS which makes this wrapper-library possible.