new Ink.UI.Animate_1(element, options)

Accepts

• element

  Animated element

• options

  Options object

• options.animation

  Animation name

• options.duration

  Duration name (fast|medium|slow) or duration in milliseconds. Defaults to 'medium'.

• options.removeClass

  Flag to remove the CSS class when finished animating. Defaults to false.

• options.onEnd

  Callback for the animation end

Demo

Code

<button id="animate-me" class="ink-button blue">Animate!</button>
<div class="ink-animate example-box half-top-space"
    id="animated"
    data-trigger="#animate-me"
    data-animation="fadeOut"
    data-removeClass="false">
    <h3>I am the animated box</h3>
    <p>
        Animation is the process of creating a continuous motion and shape change illusion by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon.
    </p>
</div>

<script type="text/javascript">
    // Note: this step is not necessary if you are using autoload.js
    Ink.requireModules(['Ink.UI.Animate_1'], function (Animate) {
        new Animate('#animated');
    });
</script>

Fade out and remove an element.

Code

Ink.requireModules(['Ink.UI.Animate_1', 'Ink.Dom.Element_1'], function (Animate, InkElement) {
    new Animate('#some-element', {
        animation: 'fadeOut',
        trigger: '#some-button'
        onEnd: function (endData) {
            InkElement.remove(endData.element);
        }
    });
});

Create an element, place it and fade it in.

Code

Ink.requireModules(['Ink.UI.Animate_1', 'Ink.Dom.Element_1'], function (Animate, InkElement) {
    var myNewElement = InkElement.create('span', {
        className: 'ink-label red',
        setTextContent: 'Danger!'
    });
    InkElement.insertTop(myNewElement, Ink.i('someOtherElement'));
    new Animate(myNewElement, { animation: 'fadeIn' });
});

.animate(element, animation, [options]) method

Accepts

• element

  Animated element

• animation

  Animation name

• options

  Options object, containing:

• options.onEnd

  nullCallback for animation end.

• options.removeClass

  falseWhether to remove the Css class when finished.

• options.duration

  mediumDuration name (the fast|medium|slow strings) or, duration in milliseconds.

Ink.requireModules(['Ink.UI.Animate_1'], function (Animate) {
    Animate.animate(myDiv, 'fadeIn')

    Animate.animate(myDiv, 'shake', {
        onEnd: function () {
            alert('Finished shaking!');
        }
    });
});