Animation.animateDomNodeProp

Syntax

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

Parameters

context. DOM node that contains the property to animate.

propertyName. Name of the animated property.

callback. Callback function.

Description

The animateDomNodeProp method plays animation of DOM element property with specified parameters.

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 content change for one second:

// Get DOM node of the text area
var domNode = textArea.getDomNode();
// Set text
textArea.setContent("10");
console.log("Initial text: " + domNode.innerText);
// Play animation of the text change
animation.animateDomNodeProp(domNode, "innerText");
if (animation.isExecute()) {
    // Stop animation playing in one second
    var command = "console.log(\"Text before animation is finished: \" + domNode.innerText);" +
        "animation.stopToStart();" +
        "console.log(\"Text after animation is finished: \" + domNode.innerText);";
    setTimeout(command, 1000);
};

As a result of executing the example animation that changed internal text of the DOM item corresponding to the text area, is played for one second. Initial value of the text and its value before and after animation is finished, are displayed to the browser console:

Initial text: 10

Text before animation is finished: 178

Text after animation is finished: 10

See also:

Animation