This is used to animate the 'clip' style property of DOM elements. Only one side may be animated at a time. Any existing clip animation on the indicated node is cancelled when the new one is applied, and this generally behaves like animateStyle().
In addition, animateStyle() is used to provide underlying functionality, so it's details are generally supported as well.
Argument | Type | Description |
---|---|---|
element | Object | DOM element whose style is to be animated |
side | String | The side of the element to clip from. top, left, bottom or right |
animationType | String | linear, bezier or zeno. Determines the change in rate of animation over its duration |
details | Object | Additional animation parameters defined below. clip property must be defined (see below). Most ValueAnimator details are also supported. |
Details object properties:
Argument | Type | Description |
---|---|---|
clip | Object | Hash of numbers indicating current values for the clipping rectangle. Required. |
Example \usage:
This is used to animate the clipping rectangle for ProgressPill widgets.
clipStyleAnimator = Mojo.Animation.animateClip(
this.progressDiv, 'left', this.oldWidth, width, 0.2,
clip: {
top: 0, left: this.oldWidth, bottom: 12, right: 0
},
curve: 'ease-in-out'
);
0 Comments