Github user cxfeng1 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/5#discussion_r157439218
--- Diff: source/references/modules/animation.md ---
@@ -47,62 +55,36 @@ Smooth and meaningful animation is very effective for
enhancing the user experie
| 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
|
+| **transform** | Transform function to be applied to the element. The
properties in the following table are supported | object | none
|
-properties of `transform`:
+``transform`` also have many parameters,please see the table below.
-| 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 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 |
-- `callback`(function): Callback which is called after the completion of
transition.**NOTISE, 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.**
+- `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:
+| 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). |
-### Example
+### ``callback``
-```html
-<template>
- <div class="wrapper">
- <div ref="test" @click="move" class="box"></div>
- </div>
-</template>
-
-<script>
- const animation = weex.requireModule('animation')
- const modal = weex.requireModule('modal')
-
- export default {
- methods: {
- move () {
- var testEl = this.$refs.test;
- animation.transition(testEl, {
- styles: {
- color: '#FF0000',
- transform: 'translate(250px, 100px)',
- transformOrigin: 'center center'
- },
- duration: 800, //ms
- timingFunction: 'ease',
- needLayout:false,
- delay: 0 //ms
- }, function () {
- modal.toast({ message: 'animation finished.' })
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- width: 250px;
- height: 250px;
- background-color: #DDD;
- }
-</style>
-```
+Callback which is a function called after the completion of animation. In
iOS platform, you can use function to get animation processing's information.
-[try it](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
+>**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.**
+
+### Example
+- [animation demo](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
--- End diff --
Please give more examples!
---
