Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the animation module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a image component, you can move, rotate, grow, or shrink it.
type: node
position: An element that will be animated, normally you can get this by calling this.$el(id).
type: object
position: Transition options.
duration (number): Specifies the number of milliseconds of animation execution, the default value is 0, means that no animation will occur.delay (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is 0.timingFunction (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is linear, the allowed attributes are listed in the following table:| name | description | example |
|---|---|---|
linear | Specifies a transition effect with the same speed from start to end | example |
ease-in | Specifies a transition effect with a slow start | example |
ease-out | Specifies a transition effect with a slow end | example |
ease-in-out | Specifies a transition effect with a slow start and end | example |
cubic-bezier(x1, y1, x2, y2) | Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit cubic-bezier and Bézier curve. | example |
styles (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:| name | description | value type | default value | example |
|---|---|---|---|---|
| width | The width applied to the component after the animation finished. | length | none | example |
| height | The height applied to the component after the animation finished. | length | none | example |
| backgroundColor | The background color applied to the component after the animation finished. | string | none | example |
| opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | 1 | example |
| transformOrigin | The povit of transition. The possible values for x-aris are left/center/right/length or percent, and possible values of y-axis are top/center/bottom/ length or percent | x-axis y-axis | center center | example |
| transform | Transform function to be applied to the element. The properties in the following table are supported | object | none | example |
properties of transform:
| name | description | value type | default value | example |
|---|---|---|---|---|
| translate/translateX/translateY | Specifies the location of which the element will be translated. | pixel or percent | none | example |
| rotate | Specifies the angle of which the element will be rotated, the unit is degree. | number | none | example |
| scale/scaleX/scaleY | Stretch or shrink the element. | number | none | example |
type: function
position: Callback which is called after the completion of transition.