[
https://issues.apache.org/jira/browse/WEEX-86?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16294733#comment-16294733
]
ASF GitHub Bot commented on WEEX-86:
------------------------------------
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!
> Reorganize the structure of documents and website
> -------------------------------------------------
>
> Key: WEEX-86
> URL: https://issues.apache.org/jira/browse/WEEX-86
> Project: Weex
> Issue Type: Improvement
> Components: Project
> Reporter: Hanks Zhang
> Assignee: zhengshihan
>
> h1. Weex Document Index
> + contributing.md
> + development-process.md
> + who-is-using-weex.md
> + releasenote.md
> + resources.md
> h2. Guide
> + index.md
> + advanced
> + app-architecture.md
> + downgrade.md
> + page-architecture.md
> + path.md
> + use-vuex-and-vue-router.md
> + extend-android.md
> + extend-ios.md
> + extend-js-framework.md
> + extend-web-render.md
> + front-end-frameworks.md
> + integrate-devtool-to-android.md
> + integrate-devtool-to-ios.md
> + integrate-to-your-app.md
> + set-up-env.md
> + using-rax.md
> + using-vue.md
> h2. References
> + index.md
> + android-apis.md
> + ios-apis.md
> + js-framework-apis.md
> + js-service.md
> + weex-variable.md
> h3. Components
> + a.md
> + cell.md
> + div.md
> + image.md
> + indicator.md
> + input.md
> + list.md
> + loading.md
> + refresh.md
> + scroller.md
> + slider.md
> + switch.md
> + text.md
> + textarea.md
> + video.md
> + waterfall.md
> + web.md
> h3. Modules
> + animation.md
> + clipboard.md
> + dom.md
> + globalevent.md
> + meta.md
> + modal.md
> + navigator.md
> + picker.md
> + storage.md
> + stream.md
> + websocket.md
> + webview.md
> h2. WiKi
> + color-names.md
> + common-events.md
> + common-styles.md
> + css-units.md
> + design-principles.md
> + event-bubble.md
> + faq.md
> + gestures.md
> + index.md
> + platform-difference.md
> + text-styles.md
> h2. Tools
> + helpers.md
> + index.md
> + market.md
> + toolkit.md
--
This message was sent by Atlassian JIRA
(v6.4.14#64029)
