Animation.animateCSS

Syntax

animateCSS(context: HTMLElement, propertyName: String, callback: PP.Delegate|function);

Parameters

context. DOM node that contains the property to change.

propertyName. Name of the animated property.

callback. Callback function.

Description

The animateCSS method plays animation of object CSS property.

Example

To execute the example, the page must contain an instance of the Animation class named animation (see Animation constructor) and the TextArea component named textArea. Play animation of text area height change for one second:

// Get DOM node of the text area
var domNode = textArea.getDomNode();
console.log("Initial height of the text area: " + domNode.style.height);
// Play animation of text area height change
animation.animateCSS(domNode, "height");
if (animation.isExecute()) {
    // Stop animation playing in one second
    var command = "console.log(\"Height before animation is finished: \" + domNode.style.height);" +
        "animation.stopToEnd();" +
        "console.log(\"Height after animation is finished: \" + domNode.style.height);";
    setTimeout(command, 1000);
};

After executing the example animation of text area height change plays for one second. The browser console shows initial height value, and also its value before and after animation is finished:

Text area initial height: 200px

Height before animation is finished: 178px

Height after animation is finished: 200px