Animate Helper
Provide functions to handle animations and transitions gracefully. Execute a function before or after playing a css animation on an element.
Installation
Setting up is pretty straight-forward. Just download the script from dist folder and include it in your HTML:
NPM
Require Bundle is also available on NPM:
$ npm install animate-helper
Basic Usage
1. Execute a function BEFORE playing a css animation
Call the function AnimateHelper.doThenAnimate( element, animationClass, callbackFn );
passing the parameters:
element
: The element to which the animation class will be added and the animation played onanimationClass
: The class name for the animation which should have the css propertyanimation:
set to a css keyframe animation definition.callbackFn
: The function to execute before the animation is played, accepts the parameterselement
andanimationClass
.
// Set element open then play openning animationAnimateHelper;
2. Execute a function AFTER playing a css animation
Call the function AnimateHelper.animateThenDo( element, animationClass, callbackFn );
passing the parameters:
element
: The element to which the animation class will be added and the animation played onanimationClass
: The class name for the animation which should have the css propertyanimation:
set to a css keyframe animation definition.callbackFn
: The function to execute after the animation is played (animationend
event), accepts the parameterselement
andanimationClass
.
// Play closing animation then set element hiddenAnimateHelper;
Contributing to Development
This isn't a large project by any means, but you are definitely welcome to contribute.
Development environment
Clone the repo and run npm install:
$ cd path/to/animate-helper
$ npm install
Run the build command:
$ gulp build
Build on file save:
$ gulp
$ gulp watch
License
Licensed under MIT.