Question

用于一个元素在不同状态之间切换的时候定义不同的过渡效果，创建过渡动画。（在小程序端需要在 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()
});