Animate

Kube has several built-in animation effects, as well as a service for control animation in the modules you created.

Demo

Slide

slideUp

Fade

fadeOut

Flip

flipOut

Zoom

zoomOut

Rotate

rotate

Shake

shake

Pulse

pulse

Slide In

Slide Out

slideOutRight
slideOutLeft
slideOutUp

Methods

run

Arguments
el NodeElementDom element to which animation will be applied
animation String name of the animation effect
callback Function function to be called after the animation

Start the animation for the specified element. 

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.animate = app.animate;
        },
        myAnimate: function()
        {
            this.animate.run('#myelement', 'fadeOut', this._afterAnimate.bind(this));
        },
        _afterAnimate: function($el)
        {
            console.log('animation fadeOut for $el was applied');
        }
    });
})(Kube);

remove

Arguments
el NodeElementDom element to which animation will be stopped

Stop the animation of the specified element. 

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.animate = app.animate;
        },
        stopAnimate: function()
        {
            this.animate.remove('#myelement');
        }
    });
})(Kube);