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);