Transition
用于一个元素在不同状态之间切换的时候定义不同的过渡效果，创建过渡动画。（在小程序端需要在 View 增加 animation 属性）
安装
$ npm install universal-transition --save方法
transition(domNode, styles, options, callback)
参数
| 成员 | 类型 | 描述 | 必选 | 默认值 | 支持 |
|---|---|---|---|---|---|
| domNode | DOMNode | 指定元素，小程序中传入 null，详细见下文[小程序使用说明] | 是 | - |   |
| styles | Object | 详细见下文 | 是 | - |     |
| options | Object | 动画参数，详细见下文 | 否 | - |     |
| callback | Function | 动画完成后触发，小程序不支持 | 否 | - |   |
说明：下面列出属性为各个端均支持，未列出属性不保证各个端兼容性。
styles 为 object 类型，属性如下：
| 成员 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| styles.backgroundColor | Color | 背景色 | - |
| styles.height | Number | 长度值 | - |
| styles.width | Number | 长度值 | - |
| styles.opacity | Number | 透明度 0-1 | - |
| styles.transform | String | 变换类型，具体见下表 | - |
styles.transform 支持的属性如下：
| 成员 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| translate、translateX、translateY | Number | Percentage | 指定元素移动到的位置 | 0 |
| rotate、rotateX、rotateY | Angle | 指定元素偏转的角度 | 0 |
| scale、scaleX、scaleY | Number | 指定放大缩小元素的倍数 | 1 |
options 为 object 类型，属性如下：
| 成员 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| options.timingFunction | String | 动画的效果，有效值有：linear, ease, ease-in, ease-in-out, ease-out (未列出的值，可能存在兼容问题) | ease |
| options.delay | Number | 动画延迟时间 | 0 |
| options.duration | Number | 动画持续时间 | 0 |
返回
小程序返回 transitionInfo 对象，使用时调用 transitionInfo.export() 得到 View 标签的 animation 属性， 其他端返回 undefined
说明：
因为小程序无法提供DOMNode，并且动画应用方式也有差异。所以小程序需要通过export()方法获取动画内容，然后手动绑定到元素。
示例
<view animation="{{transitionInfo}}"></view>import transition from 'universal-transition';
import findDOMNode from 'rax-find-dom-node';
import { isMiniApp } from 'universal-env';
const transitionInfo = transition(isMiniApp ? null : findDOMNode(animationRef.current), {
transform: 'translate(10px, 20px) scale(1.5, 1.5) rotate(90deg)',
opacity: '0.5'
}, {
timingFunction: 'ease',
delay: 0,
duration: 1000
}, function() {
console.log('animation end');
});
// 小程序中
this.setState({
transitionInfo: transitionInfo.export()
});