* [Doc] Update doc for animation. (#268)
diff --git a/source/cn/references/modules/animation.md b/source/cn/references/modules/animation.md
index 368ed28..b7943b2 100644
--- a/source/cn/references/modules/animation.md
+++ b/source/cn/references/modules/animation.md
@@ -16,68 +16,68 @@
举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
-> **注意：** 现在Weex只支持在JavaScript中使用动画, CSS 动画是和JavaScript 动画是不一样的。我们即将支持在CSS中使用动画。
+> **Note:** 如果需要使用CSS动画，参考 [transition](../../wiki/common-styles.html#property)。
+
## 基本用法
-### animation.transition(el, options, callback)
+### animation.transition(erf, options, callback)
```javascript
animation.transition(ref1, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
+ styles: {
+ backgroundColor: '#FF0000',
+ transform: 'translate(250px, 100px)',
+ },
+ duration: 800, //ms
+ timingFunction: 'ease',
+ needLayout:false,
+ delay: 0 //ms
+ }, function () {
+ modal.toast({ message: 'animation finished.' })
+ })
```
## 属性
-### `el `：
+### `ref `：
将要执行动画的元素。
-例如指定动画的元素 ``el`` 属性为 ``test`` , 可以通过调用 `this.refs.test` 来获取元素的引用。
+例如指定动画的元素 ``ref`` 属性为 ``test`` , 可以通过调用 `this.$refs.test` 来获取元素的引用。
### `options`：
- `styles`(object):设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
-| 参数名 | 描述 | 值类型 | 默认值 |
-| --------------- | ---------------------------------------- | --------------- | --------------- |
-| width | 动画执行后应用到组件上的宽度值 | length | 无 |
-| height | 动画执行后应用到组件上的高度值 | length | 无 |
-| backgroundColor | 动画执行后应用到组件上的背景颜色 | string | none |
-| opacity | 动画执行后应用到组件上的不透明度值 | 介于 0 到 1 间的数值 | `1` |
-| transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为 `left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` |
-| transform | 定义应用在元素上的变换类型，支持下表列出的属性 | object | 无 |
+ | 参数名 | 描述 | 值类型 | 默认值 |
+ | --------------- | ---------------------------------------- | ---------- | --------------- |
+ | width | 动画执行后应用到组件上的宽度值。设置为 `needLayout` `true` 如果你需要影响布局。 | length | computed width |
+ | height | 动画执行后应用到组件上的高度值。设置为 `needLayout` `true` 如果你需要影响布局。 | length | computed height |
+ | backgroundColor | 动画执行后应用到组件上的背景颜色 | string | computed backgroundColor |
+ | opacity | 动画执行后应用到组件上的不透明度值 | computed opacity | `1` |
+ | transformOrigin | 定义变化过程的中心点. 参数 `x-aris` 可能的值为 `left`、`center`、`right`、长度值或百分比值, 参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比值 | `x-axis y-axis` | `center center` |
+ | transform | 变换类型，可能包含rotate`, `translate`, `scale`及其他属性。| object| 无 |
-`transform`同时也有很多对应的属性，可以参见下表：
+ * `transform`支持的字段如下：
-(注:如果想同时执行多个动画只需要用空格隔开，比如)
-```
- transform: 'translate(250px, 100px) scale(1.5)'
-```
+ | 名称 | 描述 | 值类型 | 默认值 |
+ | ---------------------------------------- | ------------------------------- | ------- | ---- |
+ | `translate`/`translateX`/`translateY` | 指定元素要移动到的位置 | 像素值或百分比 | 0 |
+ | `rotate` | 指定元素将被旋转的角度，单位是度 | number | 0 |
+ | `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 | number | 1 |
+ | `rotate`/`rotateX` <span class="api-version">v0.14+</span> /`rotateY` <span class="api-version">v0.14+</span> | 指定元素将被旋转的角度，单位是度 | number | 无 |
+ | `perspective` <span class="api-version">v0.16+</span> | 观察者距离z=0平面的距离，在Android 4.1及以上有效 | number | 正无穷 |
+ > (注:如果想同时执行多个动画只需要用空格隔开，比如)
+ ```
+ transform: 'translate(250px, 100px) scale(1.5)'
+ ```
-| 名称 | 描述 | 值类型 | 默认值 |
-| ---------------------------------------- | ------------------------------- | ------- | ---- |
-| `translate`/`translateX`/`translateY` | 指定元素要移动到的位置 | 像素值或百分比 | 无 |
-| `rotate` | 指定元素将被旋转的角度，单位是度 | number | 无 |
-| `scale`/`scaleX`/`scaleY` | 按比例放大或缩小元素 | number | 无 |
-| `rotate`/`rotateX` <span class="api-version">v0.14+</span> /`rotateY` <span class="api-version">v0.14+</span> | 指定元素将被旋转的角度，单位是度 | number | 无 |
-| `perspective` <span class="api-version">v0.16+</span> | 观察者距离z=0平面的距离，在Android 4.1及以上有效 | number | 正无穷 |
-
-* `duration `(number)：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示没有动画效果。
+* `duration `(number)：指定动画的持续时间 (单位是毫秒)，默认值是 `0`，表示瞬间达到动画结束状态。
* `delay ` (number)：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 `0`，表示没有延迟，在请求后立即执行动画。
-* `needLayout` (boolean)：节点动画执行时是否产生布局动画即LayoutAnimation，默认值是false。
-* `timingFunction ` (string)：描述动画执行的速度曲线，用于使动画变化更为平滑。默认值是 `linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
+* `needLayout` (boolean)：动画执行是否影响布局，默认值是false。
+* `timingFunction ` (string)：描述动画执行的速度曲线，用于描述动画已消耗时间和动画完成进度间的映射关系。默认值是 `linear`，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
| 属性名 | 描述 |
| ------------------------------ | ---------------------------------------- |
@@ -91,7 +91,9 @@
### `callback `
`callback`是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。
- > **注意: 在0.16.0+版本后，iOS上可以获取animation是否执行成功的信息，callback中的`result`参数会有两种，分别是是`Success`与`Fail`，Android目前暂不支持。**
+ > **注意: 在0.16.0+版本后，iOS上可以获取 animation 是否执行成功的信息，callback中的`result`参数会有两种，分别是是`Success`与`Fail`。**
+
+ > **注意: Android 的callback 函数不支持result参数**
## 示例
[animation demo](http://dotwe.org/vue/a6c03edd4c5bbd6caea29cac688269a0)
diff --git a/source/references/modules/animation.md b/source/references/modules/animation.md
index c0a69f5..e7a96c1 100644
--- a/source/references/modules/animation.md
+++ b/source/references/modules/animation.md
@@ -15,76 +15,78 @@
For example, if you have a `image` component, you can move, rotate, grow, or shrink it by animation.
-> **Note:** Now,Weex only support use animation in Javascript. CSS Animation is different from this,we will soon support CSS Animation.
+> **Note:** Ref [transition](../../wiki/common-styles.html#property) if you want to use CSS animation.
## Basic Usage
-### animation.transition(el, options, callback)
+### animation.transition(ref, options, callback)
```javascript
-animation.transition(ref1, {
- styles: {
- backgroundColor: '#FF0000',
- transform: 'translate(250px, 100px)',
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
+animation.transition(test, {
+ styles: {
+ backgroundColor: '#FF0000',
+ transform: 'translate(250px, 100px)',
+ },
+ duration: 800, //ms
+ timingFunction: 'ease',
+ needLayout:false,
+ delay: 0 //ms
+ }, function () {
+ modal.toast({ message: 'animation finished.' })
+ })
```
## Attributes
-### ``el``
+### ``ref``
-An element that will be animated.
+The element that will be animated.
-For example , specify the `el` attribute for the element you want to animated as `element`, so you can get this element by calling `this.refs.element`.
+For example, if the value of `ref` for an element is `test`, you can start an animation with `this.$refs.test`.
### ``options``
-- `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:
+- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The supported styles are listed in the following table:
-| name | description | value type | default value |
-| :-------------- | :--------------------------------------- | :-------------------- | :-------------- |
-| width | The width applied to the component after the animation finished. | length | none |
-| height | The height applied to the component after the animation finished. | length | none |
-| backgroundColor | The background color applied to the component after the animation finished. | string | none |
-| opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | `1` |
-| 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` |
-| **transform** | Transform function to be applied to the element. The properties in the following table are supported | object | none |
+ | name | description | value type | default value |
+ | :-------------- | :--------------------------------------- | :-------------------- | :-------------- |
+ | width | The width applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. | length | computed width |
+ | height | The height applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. | length | computed height |
+ | backgroundColor | The background color applied to the component after the animation finished. | string | computed backgroundColor |
+ | opacity | The opacity applied to the component after the animation finished. | number between 0 to 1 | computed opacity |
+ | transformOrigin | The pivot 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` |
+ | **transform** | Transform object, which may include `rotate`, `translate`, `scale` and etc. | object | none |
-``transform`` also have many parameters,please see the table below.
+ * The following table illustrate the detail of ``transform``.
-| name | description | value type | default value |
-| :--------------------------------------- | :--------------------------------------- | :--------------- | :---------------- |
-| translate/translateX/translateY | Specifies the location of which the element will be translated to. | pixel or percent | none |
-| rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> | Specifies the angle of which the element will be rotated, the unit is degree. | number | none |
-| perspective <span class="api-version">v0.16+</span> | The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. | number | positive infinity |
-| scale/scaleX/scaleY | Stretch or shrink the element. | number | none |
+ | name | description | value type | default value |
+ | :--------------------------------------- | :--------------------------------------- | :--------------- | :---------------- |
+ | translate/translateX/translateY | Specifies the location which the element will be translated to. | pixel or percent | 0 |
+ | rotate/rotateX <span class="api-version">v0.14+</span> /rotateY <span class="api-version">v0.14+</span> | Specifies the angle of which the element will be rotated, the unit is degree. | number | 0 |
+ | perspective <span class="api-version">v0.16+</span> | 3D perspective. The distance between the z=0 plane and the user. Supported for **Android 4.1** and above. | number | positive infinity |
+ | scale/scaleX/scaleY | Stretch or shrink the element. | number | 1 |
-- `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`.
-- `needLayout`(boolean)：Whether or not the layout animation occurs when animation is executed，default value is `false`
-- `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:
+- `duration` (number): Specify the duration of animation execution, the default value is `0`, meaning that the component get the desired property immediately.
+- `delay` (number): Specify the waiting time before the animation starts. The default value is `0`.
+- `needLayout`(boolean)：Whether the change to layout(width/height/etc..) is persistence and takes affect after the animation. Default value is `false`
+- `timingFunction` (string): Used to describe how the intermediate values are calculated for the CSS properties being affected by the animation effect. default value is `linear`, the supported values are listed in the following table:
-| name | description |
-| :----------------------------- | :--------------------------------------- |
-| `linear` | Specifies a transition effect with the same speed from start to end |
-| `ease` | Specifies a transition effect with a slower and slower speed |
-| `ease-in` | Specifies a transition effect with a slow start |
-| `ease-out` | Specifies a transition effect with a slow end |
-| `ease-in-out` | Specifies a transition effect with a slow start and end |
-| `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](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
+ | name | description |
+ | :----------------------------- | :--------------------------------------- |
+ | `linear` | Specifies a transition effect with the same speed from start to end |
+ | `ease` | Specifies a transition effect with a slower and slower speed |
+ | `ease-in` | Specifies a transition effect with a slow start |
+ | `ease-out` | Specifies a transition effect with a slow end |
+ | `ease-in-out` | Specifies a transition effect with a slow start and end |
+ | `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](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
### ``callback``
-Callback which is a function called after the completion of animation. In iOS platform, you can use function to get animation processing's information.
+Callback is a function called after the completion of animation. In iOS platform, you can use function to get information of animation execution.
>**Note: after WeexSDK0.16.0, in iOS platform can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.**
+> **Note: Android doesn't support the result parameter.**
+
### Example
- [animation demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
