The main method of this UI module is "animate". Call it with the target element (or a selector), the animation name (see below), a duration (in milliseconds or 'slow', 'medium', 'fast'), and a callback. You can also send an object with the {duration, onEnd}
parameters after the animation name.
This method still works on old browsers without CSS3 animation support. When support is not detected, no animation occurs, and the callback is called immediately.
For the full animation name list, visit http://daneden.me/animate/
You can execute an animation as a one-time thing.
Animate.animate('#to-animate', 'bounce', 'slow');
This is how to do the common task of fading out an element and then remove it. It uses the fourth parameter, onEnd
, to perform an action when your animation ends. If the browser does not support animations, this function is called immediately after anyway.
var toAnimate = Ink.i('element_id');
Animate.animate(toAnimate, 'fadeOut', 'slow', function () {
InkElement.remove(toAnimate);
})
You can use Ink.UI.Animate by adding the ink-animate
class to your elements. This section shows you how can use this feature.
The below example shows you how to set a trigger and say what animation you want using markup (Remember to load the autoload.js script!).
You can use data-attributes like data-trigger
, data-animation
, data-duration
to customize the animation. The full list is available in the API documentation for the module.
Source code:
<button id="animate-me" class="ink-button">Animate me!</button>
<span class="ink-label info ink-animate"
data-trigger="#animate-me"
data-animation="fadeOut"
data-revert="false">Hi!</span>
To see this example, refresh the page and see the label slowly fade out.
<span class="ink-animate ink-label info"
data-animation="fadeOut"
data-revert="false" data-duration="10000">Slowly fading oooooooout.....</span>