YorkShen closed pull request #269: * [Doc] Add the relationship between
transition and transform.
URL: https://github.com/apache/incubator-weex-site/pull/269
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/source/cn/references/modules/animation.md
b/source/cn/references/modules/animation.md
index b7943b260..d6243de75 100644
--- a/source/cn/references/modules/animation.md
+++ b/source/cn/references/modules/animation.md
@@ -16,7 +16,7 @@ JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋
举个例子，如果有一个 `<image>` 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
-> **Note:** 如果需要使用CSS动画，参考
[transition](../../wiki/common-styles.html#property)。
+> **注意:** 如果需要使用CSS动画，参考
[transition](../../wiki/common-styles.html#property)或[transform](../../wiki/common-styles.html#transform)
。
## 基本用法
diff --git a/source/cn/wiki/common-styles.md b/source/cn/wiki/common-styles.md
index 8bea9b7f2..5b2dff366 100644
--- a/source/cn/wiki/common-styles.md
+++ b/source/cn/wiki/common-styles.md
@@ -300,50 +300,6 @@ Weex 支持 `position` 定位，用法与 CSS position 类似。为元素设置
}
</style>
```
-
-## transform
-
-transform 属性向元素应用 2D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-
-目前支持的 transform 声明格式:
-
-- translate( <number/percentage> [, <number/percentage>]?)
-- translateX( <number/percentage> )
-- translateY( <number/percentage> )
-- scale( <number>)
-- scaleX( <number> )
-- scaleY( <number> )
-- rotate( <angle/degree> )
-- rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-- rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-- perspective( <number> ) Android 4.1及以上版本支持 <span
class="api-version">v0.16+</span>
-- transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### 示例
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
-
-
## transition <span class="api-version">v0.16.0+</span>
现在您可以在CSS中使用transition属性来提升您应用的交互性与视觉感受，transition中包括布局动画，即LayoutAnimation，现在布局产生变化的同时也能使用transition带来的流畅动画。transition允许CSS的属性值在一定的时间区间内平滑地过渡。
@@ -399,6 +355,48 @@ transform 属性向元素应用 2D 转换。该属性允许我们对元素进行
</style>
```
+## transform
+> **注意：除了`perspective`和`transform-origin`，`transition`支持了`transform`的全部能力。**
+
+transform 属性向元素应用 2D/3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
+
+目前支持的 transform 声明格式:
+
+- translate( <number/percentage> [, <number/percentage>]?)
+- translateX( <number/percentage> )
+- translateY( <number/percentage> )
+- scale( <number>)
+- scaleX( <number> )
+- scaleY( <number> )
+- rotate( <angle/degree> )
+- rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
+- rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
+- perspective( <number> ) Android 4.1及以上版本支持 <span
class="api-version">v0.16+</span>
+- transform-origin: number/percentage/keyword(top/left/right/bottom)
+
+### 示例
+
+```HTML
+<template>
+ <div class="wrapper">
+ <div class="transform">
+ <text class="title">Transformed element</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .transform {
+ align-items: center;
+ transform: translate(150px,200px) rotate(20deg);
+ transform-origin: 0 -250px;
+ border-color:red;
+ border-width:2px;
+ }
+ .title {font-size: 48px;}
+</style>
+```
+
## 伪类 <span class="api-version">v0.9.5+</span>
Weex 支持四种伪类：`active`, `focus`, `disabled`, `enabled`
diff --git a/source/references/modules/animation.md
b/source/references/modules/animation.md
index e7a96c1ad..8081dbccc 100644
--- a/source/references/modules/animation.md
+++ b/source/references/modules/animation.md
@@ -15,7 +15,7 @@ JS-Animation can perform a series of simple transformations
(position, size, ro
For example, if you have a `image` component, you can move, rotate, grow, or
shrink it by animation.
-> **Note:** Ref [transition](../../wiki/common-styles.html#property) if you
want to use CSS animation.
+> **Note:** Ref [transition](../../wiki/common-styles.html#property) or
[transform](../../wiki/common-styles.html#transform) if you want to use CSS
animation.
## Basic Usage
diff --git a/source/wiki/common-styles.md b/source/wiki/common-styles.md
index 970ba60cf..685353789 100644
--- a/source/wiki/common-styles.md
+++ b/source/wiki/common-styles.md
@@ -190,47 +190,6 @@ we can use properties below to control placement of weex
tag
</template>
```
-## transform
-
-The CSS **transform** property lets you modify the coordinate space of the CSS
visual formatting model. Using it, elements can be translated, rotated and
scaled.
-
-Currently supported format:
-
-* translate( <number/percentage> [, <number/percentage>]?)
-* translateX( <number/percentage> )
-* translateY( <number/percentage> )
-* scale( <number>)
-* scaleX( <number> )
-* scaleY( <number> )
-* rotate( <angle/degree> )
-* rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-* rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-* perspective( <number> ), supported for Android 4.1 and above. <span
class="api-version">v0.16+</span>
-* transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### Example
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
## transition <span class="api-version">v0.17.0+</span>
Now you can use the transition attribute in CSS to enhance the interactivity
and visual experience of your application. The transition includes the layout
animation, that is, LayoutAnimation, which now changes the layout and uses the
fluent animation of the transition. Transition allows the CSS attribute values
to transition smoothly over a certain time interval.
@@ -286,6 +245,48 @@ Now you can use the transition attribute in CSS to enhance
the interactivity and
</style>
```
+## transform
+
+> **Note: Consider use `transition` instead, which supports all the style that
`transform` supports except for `transform-origin` and `perspective`**
+
+The CSS **transform** property lets you modify the coordinate space of the CSS
visual formatting model. Using it, elements can be translated, rotated and
scaled.
+
+Currently supported format:
+
+* translate( <number/percentage> [, <number/percentage>]?)
+* translateX( <number/percentage> )
+* translateY( <number/percentage> )
+* scale( <number>)
+* scaleX( <number> )
+* scaleY( <number> )
+* rotate( <angle/degree> )
+* rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
+* rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
+* perspective( <number> ), supported for Android 4.1 and above. <span
class="api-version">v0.16+</span>
+* transform-origin: number/percentage/keyword(top/left/right/bottom)
+
+### Example
+
+```HTML
+<template>
+ <div class="wrapper">
+ <div class="transform">
+ <text class="title">Transformed element</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .transform {
+ align-items: center;
+ transform: translate(150px,200px) rotate(20deg);
+ transform-origin: 0 -250px;
+ border-color:red;
+ border-width:2px;
+ }
+ .title {font-size: 48px;}
+</style>
+```
## Pseudo class <span class="api-version">v0.9.5+</span>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
