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