animate.start

webix.animate.start(node, animation)

webix.animate.start helper.

Please look into the linked official documentation.

References

helpers
defaults, delay(), event(), eventRemove().

Referenced by

helpers
animate().

External references

Official documentation page.

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
webix.animate.start = function(node, animation){
    //getting config object by merging specified and default options
    if (typeof animation == 'string')
        animation = {type: animation};

    animation = webix.Settings._mergeSettings(animation,webix.animate.defaults);

    var prefix = webix.env.cssPrefix;
    var settings = node._has_animation = animation;
    var skew_options, scale_type;

    //jshint -W086:true
    switch(settings.type == 'slide' && settings.direction) { // getting new x, y in case it is slide with direction
        case 'right':
            settings.x = node.offsetWidth;
            break;
        case 'left':
            settings.x = -node.offsetWidth;
            break;
        case 'top':
            settings.y = -node.offsetHeight;
            break;
        case 'bottom':
        default:
            settings.y = settings.y||node.offsetHeight;
            break;
    }

    if(settings.type == 'flip' || settings.type == 'flipback') {
            skew_options = [0, 0];
            scale_type = 'scaleX';
            if(settings.subtype == 'vertical') {
                skew_options[0] = 20;
                scale_type = 'scaleY';
            }
            else
                skew_options[1] = 20;
            if(settings.direction == 'right' || settings.direction == 'bottom') {
                skew_options[0] *= -1; skew_options[1] *= -1;
            }
    }

    var duration = settings.duration + "ms " + settings.timing + " " + settings.delay+"ms";
    var css_general = prefix+"TransformStyle: preserve-3d;"; // general css rules
    var css_transition = '';
    var css_transform = '';

    switch(settings.type) {
        case 'fade': // changes opacity to 0
            css_transition = "opacity " + duration;
            css_general = "opacity: 0;";
            break;
        case 'show': // changes opacity to 1
            css_transition = "opacity " + duration;
            css_general = "opacity: 1;";
            break;
        case 'flip':
            duration = (settings.duration/2) + "ms " + settings.timing + " " + settings.delay+"ms";
            css_transform = "skew("+skew_options[0]+"deg, "+skew_options[1]+"deg) "+scale_type+"(0.00001)";
            css_transition = "all "+(duration);
            break;
        case 'flipback':
            settings.delay += settings.duration/2;
            duration = (settings.duration/2) + "ms " + settings.timing + " " + settings.delay+"ms";
            node.style[webix.env.transform] = "skew("+(-1*skew_options[0])+"deg, "+(-1*skew_options[1])+"deg) "+scale_type+"(0.00001)";
            node.style.left = "0";

            css_transform = "skew(0deg, 0deg) "+scale_type+"(1)";
            css_transition = "all "+(duration);
            break;
        case 'slide': // moves object to specified location
            var x = settings.x +"px";
            var y = settings.y +"px";
            // translate(x, y) OR translate3d(x, y, 0)
            css_transform = webix.env.translate+"("+x+", "+y+((webix.env.translate=="translate3d")?", 0":"")+")";
            css_transition = prefix+"transform " + duration;
            break;
        default:
            break;
    }

    //set styles only after applying transition settings
    webix.delay(function(){
        node.style[webix.env.transition] = css_transition;
        webix.delay(function(){
            if (css_general)
                node.style.cssText += css_general;
            if (css_transform)
                node.style[webix.env.transform] = css_transform;
            var transitionEnded = false;
            var tid = webix.event(node, webix.env.transitionEnd, function(ev){
                node._has_animation = null;
                if (settings.callback) settings.callback.call((settings.master||window), node,settings,ev);
                transitionEnded = true;
                webix.eventRemove(tid);
            });
            window.setTimeout(function(){
                if(!transitionEnded){
                    node._has_animation = null;
                    if (settings.callback) settings.callback.call((settings.master||window), node,settings);
                    transitionEnded = true;
                    webix.eventRemove(tid);
                }
            }, (settings.duration*1+settings.delay*1)*1.3);
        });
    });
};

/*
    Behavior:MouseEvents - provides inner evnets for  mouse actions
*/