www.webOShelp.net

Get the latest on:webOS Developers' RSS FeedwebOS Facebook page webOS Twitter Feed

Home Resources API Reference Mojo.Animation.animateStyle(element, attr, animationType, details)

Mojo.Animation.animateStyle(element, attr, animationType, details)

Used to animate CSS style properties of DOM elements. Animates the specified attribute to the specified value over a specified duration. Any existing animation on the indicated node for the indicated style attribute is cancelled when the new one is applied. The animator will override any other changes made to the animated attribute while the animation is in progress. Currently, only integer valued attributes are supported, so colors and opacity cannot be animated (except using the styleSetter detail property).

One difference between this animator and CSS transitions is that both a fromValue and a toValue must be specified. This enables the animation speed to be "correct" when an attribute is being animated back and forth between two values and the back animation needs to be started while the forward animation is only partially complete.

Argument Type Description
element Object DOM element whose style is to be animated
attr Object Name of the CSS style attribute to be animated
animationType String linear, bezier or zeno.  Determines the change in rate of animation over its duration.
details Object Additional animation parameters defined below.  Most ValueAnimator details are also supported.

Details object properties:

Property Type Description
currentValue Number Current value of style attribute being animated.  Default is to call parseInt() on the style property.
styleSetter Function Function that actually applies the style change.  Allows for setting complex style properties like clip.
from Number Starting value for number being animated (passed to ValueAnimator)
to Number End value for number being animated (passed to ValueAnimator)
duration Number Duration of the animation in seconds

Example usage:

This code is used to animate spacers to 0 height when doing drag and drop reordering in lists. Note the use of an onComplete function to remove the 0-height spacer from the DOM.

    Mojo.Animation.animateStyle(
this.curDragSpacer, 'height', this.dragHeight, 0, .2,
{
onComplete:function(el){Element.remove(el);}
}
);

animateValue() is used to provide underlying functionality, so its details are generally supported as well.

 

0 Comments

    Add Comment


      • >:o
      • :-[
      • :'(
      • :-(
      • :-D
      • :-*
      • :-)
      • :P
      • :\
      • 8-)
      • ;-)