ui.animateView

webix.ui.animateView(view, stateHandler, config)

webix.ui.animateView helper.

Please look into the linked official documentation.

References

helpers
animate(), formLine().

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
webix.ui.animateView = function(view, stateHandler, config){
    view = webix.$$(view);
    if (view){
        config = config || { type:"slide", direction:"left" };

        var getHTML = function(view){
            var el = view._viewobj;
            var css = el.className;
            var content =el.innerHTML;
            return "<div class='"+css+"' style='width:"+el.offsetWidth+"px;height:"+el.offsetHeight+"px;'>"+content+"</div>";
        };

        // get 'display' state of child nodes
        var display = [];
        for(var i =0; i< view._viewobj.childNodes.length;i++){
            var node = view._viewobj.childNodes[i];
            var value = node.currentStyle ?node.currentStyle.display : getComputedStyle(node, null).display;
            display.push(value||"");
        }
        // get current html content
        var currentState = getHTML(view);

        // apply new state
        if(typeof stateHandler == "function"){
            stateHandler.call(this);
        }

        // get new html content
        var newState = getHTML(view);

        // insert elements into the view
        var tempParent = view._viewobj.insertBefore(webix.html.create("DIV",{
            "class" : "webix_view_animate",
            "style" : "width:"+view._viewobj.offsetWidth+"px;height:"+view._viewobj.offsetHeight+"px;"
        }, newState+currentState),view._viewobj.firstChild);

        // hide child nodes
        for(var i =1; i< view._viewobj.childNodes.length;i++){
            view._viewobj.childNodes[i].style.display = "none";
        }

        // animate inserted elements
        var line = webix.animate.formLine(
            tempParent.childNodes[0],
            tempParent.childNodes[1],
            config
        );
        config.callback = function(){
            if(tempParent){
                view._viewobj.removeChild(tempParent);
                tempParent = null;
                // restore 'display' state of child nodes
                for(var i =0; i< view._viewobj.childNodes.length;i++){
                    view._viewobj.childNodes[i].style.display = display[i];
                }
            }
        };
        webix.animate(line, config);

        return view;
    }
};

/*called in baseview $init for calculate scrollSize*/