PP.Ui.animate

Syntax

PP.Ui.animate(obj: HTMLElement | PP.Object, type: PP.Ui.AnimationType, propName: String, settings: Object, callback: PP.Delegate | Function);

Parameters

obj. Object or node being animated.

type. Animation type. Argument value - the PP.Ui.AnimationType enumeration item.

propName. Object property being animated.

settings. Animation setup.

callback. Callback function which is executed after animation is completed.

Description

The animate method starts object animation.

Example

To execute the example, the HTML page must contain links to PP.js script file and to PP.css styles file in the <body> tag of the HTML page of the <div> item with the button identifier. In the onload event of the <body> tag it is necessary to specify the call of the createButton() function. Add the button on the page:

var button;
function createButton() {
    // Create the button        
    button = new PP.Ui.Button({
        // Set parent item
        ParentNode: document.getElementById("button"),
        // Set button contents
        Content: "Button",
    });
    // Launch animation
    PP.Ui.animate(button.getDomNode(), "CSS", "width", {
        Start: 10,
        End: 60,
        Duration: 4000
    });
}

Launch animation of the button width change from the 10 value to the 60 value during five seconds:

// Start animation
PP.Ui.animate(button.getDomNode(), "CSS", "width", {
    Start: 10,
    End: 60,
    Duration: 4000
});

Initial button status:

Button status after animation is completed: