Used to create transition animation.
Supported
Install
$ npm install universal-transition --save
Usage
; ;
Methods
transition(domNode, styles, options, callback)
Supported
icon_miniapp_bytedance
Arguments
Property | Type | Description | Required | Default | Supported |
---|---|---|---|---|---|
domNode | DOMNode |
Specified element,mini app does not support,see below for details[mini app instructions] | yes | - | |
styles | object |
See below for details | yes | - | |
options | Object |
options,See below for details | no | - | |
callback | function |
Triggered after the animation is complete,mini app does not support | no | - |
The properties listed below are supported for each environment, and the properties not listed are not guaranteed for each environment.
styles supported attributes and situation description:
Property | Type | Description | Default |
---|---|---|---|
styles.backgroundColor | color |
background color | - |
styles.height | length |
Length value | - |
styles.width | length |
Length value | - |
styles.opacity | number |
Opacity 0-1 | - |
styles.transform | string |
transform type,see below for details | - |
styles.transform supported attributes:
Property | Type | Description | Default |
---|---|---|---|
translate、translateX、translateY | number | percentage |
Specify where the element is moved to | 0 |
rotate、rotateX、rotateY | angle |
Specifies the angle at which the element is deflected | 0 |
scale、scaleX、scaleY | number |
Specify multiples of zoomed in and out elements | 1 |
options:
Property | Type | Description | Default |
---|---|---|---|
options.timingFunction | string |
Animation effect,valid values are:"linear","ease","ease-in","ease-in-out","ease-out"(Unlisted values, there may be compatibility issues) | ease |
options.delay | number |
Animation delay time | 0 |
options.duration | number |
Animation duration | 0 |
Return
Mini app return export()
,other cases return undefined
Mini app instructions:
Because the mini app can't provide DOMNode
, and use animation way is different. So the mini app needs to get the animation content by the export()
method and then manually bind to the element.
Usage