landers.base/src/animate.js

landers.base

; (function (window, $) {
    Landers = Landers || {};
    Landers.animate = {
        _callbacks:'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend',
        mod_complete:false,
        mod_init:function(callback){
            var me = this;
            if (me.mod_complete) {
                return callback && callback();
            };
            Landers.loader.cssm('animate', function(){
                me.mod_complete = true;
                callback && callback();
            });
        },
        effects:{
            'default' : {'in':'scaleUp', out:'scaleDown', random:true},

            //fade
            'fade1': {'in':'fadeIn', out:'fadeOut', 'duration-out':300, random:true},
            'fade2' : {'in':'pop_fadein', out:'pop_fadeout', random:true},
            'fade3' : {'in':'scaleUp', out:'pop_fadeout', random:true},
            'fade4' : {'in':'pop_fadein', out:'scaleDown', random:true},

            //zoom
            'zoom1': {'in':'scaleUp', out:'scaleDown', random:true},
            'zoom2': {'in':'zoomIn', out:'zoomOut', duration:500, random:true},
            'zoom3' : {'in':'pop_fadein3x', out:'pop_fadeout3x', random:true},
            'zoom4': {'in':'zoomInDown', out:'zoomOutDown'},
            'zoom5': {'in':'zoomInUp', out:'zoomOutUp'},
            'zoom6': {'in':'zoomInLeft', out:'zoomOutRight'},
            'zoom7': {'in':'zoomInRight', out:'zoomOutLeft'},
            'zoom8': {'in':'bounceIn', out:'bounceOut', duration:500, random:true},

            //hmove
            'hmove1': {'in':'bounceInLeft', out:'bounceOutRight', 'duration-in':500, 'duration-out':1000, random:true},
            'hmove2': {'in':'fadeInLeft', out:'fadeOutRight', 'duration-in':500, 'duration-out':300, random:true},
            'hmove3': {'in':'lightSpeedIn', out:'lightSpeedOut', 'duration-in':500, 'duration-out':300},

            //vmove
            'vmove1': {'in':'bounceInDown', out:'bounceOutDown', 'duration-in':500, 'duration-out':1000, random:true},
            'vmove2': {'in':'fadeInDown', out:'fadeOutUp', 'duration-in':200, 'duration-out':300, random:true},

            //hflip
            'hflip1': {'in':'flipInY', out:'flipOutY', duration:600},
            'hflip2': {'in':'flip', out:'scaleDown', 'duration-out':500},

            //vflip
            'vflip1': {'in':'flipInX', out:'flipOutX', duration:600, random:true},

            //rotate
            'rotate1': {'in':'rotateIn', out:'rotateOut', duration:500},
            'rotate2': {'in':'rotateInUpLeft', out:'rotateOutUpRight', duration:500, random:true},
            'rotate3': {'in':'rotateInDownLeft', out:'rotateOutUpRight', duration:500},
            'rotate4': {'in':'rotateInNewspaper', out:'rotateOutNewspaper'},

            //roll
            'roll1': {'in':'rollIn', out:'rollOut', duration:500},

            //flash
            'flash1': {'in':'flash', out:'flash', duration:500}
        },
        random:function(){
            return 'default';
            var keys = [];
            for (var i in this.effects) {
                if (this.effects[i].random) keys.push(i);
            }
            var n = Landers.utils.math.random(0, keys.length-1);
            return keys[n];
        },
        attach:function(xo, xclass, duration, callback){
            var me = this;
            me.mod_init(function(){
                var $o = $(xo).show().visible().removeClass(xclass);
                xclass += ' animated';
                if (duration) {
                    $o.css({'animation-duration': duration + 'ms' });
                    $o.css({'transition-duration': duration + 'ms' });
                };
                $o.addClass(xclass).one(me._callbacks, function(){
                    $o.removeClass(xclass);
                    callback && callback();
                });
            });
        },
        show:function(xin, effect, callback) {
            effect = effect || 'default';
            var effect = this.effects[effect];
            var class_in = effect['in'];
            var duration = effect['duration-in'] || effect['duration'];
            this.attach(xin, class_in, duration, function(){
                $(xin).show();
                callback && callback();
            });
        },
        hide:function(xout, effect, callback){
            effect = effect || 'default';
            var effect = this.effects[effect];
            var class_out = effect['out'];
            var duration = effect['duration-out'] || effect['duration'];
            this.attach(xout, class_out, duration, function(){
                $(xout).hide();
                callback && callback();
            });
        },
        transitive:function(xout, effect_out, xin, effect_in, callback, is_sync){
            var me = this;
            var effect_out = effect_out || 'default';
            var effect_in = effect_in || 'default';
            if (is_sync) {
                me.hide(xout, effect_out);
                me.show(xin, effect_in, function(){
                    callback && callback();
                });
            } else {
                me.hide(xout, effect_out, function(){
                    me.show(xin, effect_in, function(){
                        callback && callback();
                    });
                });
            }
        }

    };
})(this, jQuery, Landers);