Angular Transit

Simple transitions for your Angular application using jQuery transitions

You must have jQuery included before using this application.

For Browserify and Webpack users, you will need to bind the jQuery npm module to the window by doing:

window.$ = require('jquery');

Usage

Directive - fade

You can have a $scope attribute as an attribute variable for fadeIn() or fadeOut() an element.

Example usage (assuming you are using $scope or $rootScope variables):

<!-- Default Fade in -->
<el fade="true"></el>
<!-- Default Fade out -->
<el fade="false"></el>
<!-- Fade in two seconds -->
<el fade="true ms:2000"></el>
<!-- Fade out two seconds -->
<el fade="false ms:2000"></el>
<!-- Fade in three seconds with one second delay -->
<el fade="true ms:3000 delay:1000"></el>

Directive - slide

You can have a $scope attribute as an attribute variable for slideDown() or slideUp() an element.

Example usage (assuming you are using $scope or $rootScope variables):

<!-- Default Slide in -->
<el slide="true"></el>
<!-- Default Slide out -->
<el slide="false"></el>
<!-- Slide in two seconds -->
<el slide="true ms:2000"></el>
<!-- Slide out two seconds -->
<el slide="false ms:2000"></el>
<!-- Slide in three seconds with one second delay -->
<el slide="true ms:3000 delay:1000"></el>

Thanks for checking Angular Transit out!

We are open to changes to the package at anytime whatsoever. So if you'd like to contribute or have suggestions, please email chris@pilotinteractive.ca

Maintained by Chris Cates and Pilot Interactive.