From 7bdc9d378dd796d071ea1a9434055f4a6972927b Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Thu, 14 Oct 2021 17:42:48 +0800
Subject: [PATCH] docs: translate weex

---
 docs/nvue-api.md   |  89 +++++------
 docs/nvue-css.md   | 358 ++++++++++++++++++++++-----------------------
 docs/nvue-event.md |  45 +++---
 3 files changed, 245 insertions(+), 247 deletions(-)

diff --git a/docs/nvue-api.md b/docs/nvue-api.md
index ba8b487ce..b087fad50 100644
--- a/docs/nvue-api.md
+++ b/docs/nvue-api.md
@@ -24,7 +24,9 @@
 
 ### addRule
 
- Weex 提供 DOM.addRule 以**加载自定义字体**。开发者可以通过指定 font-family加载 iconfont 和 custom font。开发者可以使用下面的代码加载自定义字体：
+Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.
+
+Developers may use the following code snippet to load their font:
 ``` html
 	<template>
 		<view>
@@ -57,31 +59,31 @@
 
 
 **addRule(type, contentObject)**
-- @fontFace 协议名称，不可修改。
-- @fontFamily ```font-family```的名称。
-- @src 字体地址，url('') 是保留字段，其参数如下:
-	- http. 从HTTP请求加载, e.g. ```url('http://at.alicdn.com/t/font_1469606063_76593.ttf')```
-	- https. 从HTTPS请求加载, e.g. ```url('https://at.alicdn.com/t/font_1469606063_76593.ttf')```
-	- local, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中.
-	- file. 从本地文件读取, e.g. ```url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')```
-	- data. 从base64读取, e.g. ```url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')```, 上述data字段不全。
+- @fontFace You should not change this as this is the name of the font rule
+- @fontFamily You should provide the name of your font-family there, the valid name should be a string.
+- @src The src of your custom font, and url('') is reserved for protocol reason, the supported parameters are listed below:
+	- `http`. Read from http, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
+  - `https`. Read from https, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
+  - `local`, *Android ONLY*. Read from assets directory e.g. `url('local://foo.ttf')`, the **foo.ttf** is in your android assets directory.
+  - `file`. Read from a local file, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdncom_t_font_1469606063_76593.ttf')`
+  - `data`. Read from a base64 data source, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, the above data field is only a part of the actual data.
 	
 **注意**
-> addRule 方法里的 fontFamily 可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。
-> 如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。
-> 调用addRule 在 beforeCreate 中是被推荐的。
+> You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'.
+> Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
+> Calling `addRule` in `beforeCreate` is recommended.
 
 
 
 ### scrollToElement<div id="scrollToElement"></div>
 
-让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 ```<scroller>```，```<list>```, ```<waterfall>``` 等可滚动组件中。
+Scroll the scrollable component to the referenced component. This API should only be used in the children components of a scrollable component, such as in a `<scroller>` or `<list>` component.
 
 **scrollToElement(ref, options)**
-- @ref，要滚动到的那个节点。
-- @options
-	- offset，一个到其可见位置的偏移距离，默认是 0。
-	- animated，是否需要附带滚动动画，默认是 true。
+- @ref, the referenced component who is meant to scroll into the view.
+- @options,
+	- `offset`, an space on top of the ref component, which is also scrolling down to the visual viewport. Default is `0`.
+	- `animated`, a boolean indicates whether a scroll animation should be played. If set to false, the ref component will jump into the view without any transition animation. Default is true.
 
 ``` html
   <template>
@@ -175,13 +177,13 @@
 
 ### getComponentRect
 
-获取某个元素 View 的外框。
+You can get the bounding rect of the referenced component using this API.
 
 **getComponentRect(ref, callback)**
-- @ref，要获取外框的那个节点。
-- @callback，异步方法，通过回调返回信息。
+- @ref, the referenced component.
+- @callback, the callback function after executing this action.
 
-回调方法中的数据样例：
+An example callback result should be like:
 ```html
   {
     result: true,
@@ -200,15 +202,16 @@
 
 > 此方法需要在节点渲染后调用才能获取正确的信息，可在 mounted 或 更新数据后 updated 中调用
 > 
-> 如果想要获取到 Weex 视口容器的布局信息，可以指定 ref 为字符串 'viewport'，即 getComponentRect('viewport', callback).
+> If you want to get the bounding rect of outside viewport of the weex container, you can specify the `ref` as a literal string `'viewport'`, like `getComponentRect('viewport', callback)`.
 
 
 
 ## animation
 
-```animation```模块可以用来在组件上执行动画。JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。
+The `animation` module is used to perform animation on components.
+JS-Animation can perform a series of simple transformations  (position, size, rotation, background color, and opacity) on the component with Javascript.
 
-举个例子，如果有一个```image```组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。
+For example, if you have a `image` component, you can move, rotate, grow, or shrink it by animation.
 
 ```html
   <template>
@@ -263,24 +266,24 @@
 ### transition
 
 
-- @ref，将要执行动画的元素。例如指定动画的元素 ref 属性为 test，可以通过调用 this.$refs.test 来获取元素的引用。
-- @options，动画参数。
+- @ref, the element that will be animated. For example, if the value of `ref` for an element is `test`, you can start an animation with `this.$refs.test`.
+- @options, animation properties such as keys, duration.
 
 
 下表列出了options所有合法的参数：
 
-|可选值		|描述		|
+|Property		|Describe		|
 |--			|--			|
-|styles	|设置不同样式过渡效果的键值对|
-|duration		|指定动画的持续时间 (单位是毫秒)，默认值是 0，表示瞬间达到动画结束状态。																																				|
-|delay			|指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 0，表示没有延迟，在请求后立即执行动画。																												|
-|needLayout		|动画执行是否影响布局，默认值是false。																																													|
-|timingFunction	|描述动画执行的速度曲线，用于描述动画已消耗时间和动画完成进度间的映射关系。默认值是 ```linear```，表示动画从开始到结束都拥有同样的速度。详见下						|
+|styles	|specifies the names and values of styles to which a transition effect should be applied.|
+|duration		|specifies the duration of animation execution, the default value is `0`, meaning that the component get the desired property immediately.																																				|
+|delay			|specifies the waiting time before the animation starts. The default value is `0`. 																												|
+|needLayout		|Specifies whether the change to layout(width/height/etc..) is persistence and takes affect after the animation. Default value is `false`|
+|timingFunction	|describes how the intermediate values are calculated for the CSS properties being affected by the animation effect. default value is `linear`						|
 
 
-下表列出了styles所有合法的参数：
+The supported styles are listed below:
 
-|可选值		|描述		|
+|Property		|Describe		|
 |--			|--			|
 |width	|表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置needLayout为true。默认值为computed width。|
 |height		|表示动画执行后应用到组件上的高度值。如果你需要影响布局，设置设置为 needLayout为true。默认值为computed width。		|
@@ -292,7 +295,7 @@
 
 **transform** 
 
-|可选值							|描述																					|
+|Property							|Describe																					|
 |--								|--																						|
 |translate/translateX/translateY|指定元素要移动到的位置。单位是长度或百分比，默认值是0.									|
 |rotate/rotateX/rotateY			|v0.16+ 指定元素将被旋转的角度。单位是度 角度度，默认值是0								|
@@ -304,7 +307,7 @@
 
 **timingFunction**
 
-|可选值		|描述		|
+|Property		|Describe		|
 |--			|--			|
 |linear	|动画从头到尾的速度是相同的	|
 |ease-in		|动画速度由慢到快				|
@@ -312,12 +315,12 @@
 |ease-in-out		|动画先加速到达中间点后减速到达终点			|
 |cubic-bezier(x1, y1, x2, y2)		|在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier 和 Bézier curve。|
 
-- @callback，callback是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。
+- @callback, callback is a function called after the completion of animation. In iOS platform, you can use function to get information of animation execution.
 
 
-**注意**
-- iOS上可以获取 ```animation``` 是否执行成功的信息，callback中的result参数会有两种，分别是是Success与Fail。
-- Android 的callback 函数不支持result参数。
+**Notes**
+- On iOS platform you 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.
+- Android doesn't support the result parameter.
 
 
 > 如果需要使用CSS动画，参考[transition](/nvue-css?id=transition)和[transform](/nvue-css?id=transform)。
@@ -633,21 +636,21 @@ nvue 支持大部分 uni-app API ，下面只列举目前还**不支持的 API**
 
 ##### 动画
 
-|API		|说明		|解决方案|
+|API		|Describe		|解决方案|
 |--			|--			|--			|
 |uni.createAnimation()	|创建一个动画实例	|[animation](/nvue-api?id=animation)|
 
 
 ##### 滚动
 
-|API		|说明		|解决方案|
+|API		|Describe		|解决方案|
 |--			|--			|--			|
 |uni.pageScrollTo()	|将页面滚动到目标位置	|[scrollToElement](#scrollToElement)|
 
 
 ##### 节点布局交互
 
-|API		|说明		|
+|API		|Describe		|
 |--			|--			|
 |uni.createIntersectionObserver()	|创建并返回一个 IntersectionObserver 对象实例	|
 
diff --git a/docs/nvue-css.md b/docs/nvue-css.md
index f4c6a7045..a6d03d6b5 100644
--- a/docs/nvue-css.md
+++ b/docs/nvue-css.md
@@ -1,8 +1,8 @@
 
-#### nvue所支持的通用样式已在本文档中全部列出，一些组件可能有自定义样式，请参考组件文档。除此之外的属性，均不被支持。
+#### The supported styles is listed below, and some component may support custom style, which you can check in the component's doc. Except for this, other styles are not supported.
 
 
-### 注意事项
+### Notes
 
 - nvue的css**仅支持flex布局**，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
 - class 进行绑定时只支持数组语法。
@@ -39,23 +39,23 @@
 
 ## 盒模型
 
-nvue盒模型基于 CSS 盒模型，每个 nvue 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。
+Weex box model based on the CSS box model, all of weex elements can be considered as boxes.
 
-盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 `margin edge`, 边框边界 `border edge`, 内边距边界 `padding edge` 与内容边界 `content edge`。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。
+The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
 
-![图片描述文字](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ec4f2810-2fec-11eb-899d-733ae62bed2f.png)
+![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ec4f2810-2fec-11eb-899d-733ae62bed2f.png)
 
 
-> nvue盒模型的 `box-sizing` 默认为 `border-box`，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
+> Weex only supports `box-sizing:border-box`, in which box size includes `content`, `padding` and `border-width` and excludes `margin`.
 
-> 在 Android 平台，nvue只支持 `overflow:hidden`。
+> On Android, Weex only supports `overflow:hidden`.
 
-> 在 iOS 上，nvue支持 `overflow:hidden` 和 `overflow:visible`，默认是 `overflow:visible`。
+> On iOS, Weex supports `overflow:hidden` and `overflow:visible` and by default, it is `overflow:visible`.
 
 
 
 
-##### 基本用法
+##### basic usage
 ```html
 	<template>
 		<view>
@@ -66,36 +66,36 @@ nvue盒模型基于 CSS 盒模型，每个 nvue 元素都可视作一个盒子
 
 
 
-|可选值			|描述									|
+|Property			|Describe									|
 |--				|--										|
-|width {length}	|宽度，默认值 0							|
-|height {length}|高度，默认值 0							|
+|width {length}	|width, default value 0							|
+|height {length}|height, default value 0							|
 
-##### 内边距
-padding {length}：内边距，内容和边框之间的距离，默认值 0。与标准 CSS 类似，padding 支持简写，也可分解为以下四个：
+##### padding
+`padding` specifies the space between element content and the element border. One can use shorthand for four edges or specify the padding for one edge:
 
-|可选值					|描述								|
+|Property					|Describe								|
 |--						|--									|
-|padding {length}		|上、右、下、左四边内边距，默认值 0	|
-|padding-left {length}	|左内边距，默认值 0					|
-|padding-right {length}	|右内边距，默认值 0					|
-|padding-top {length}	|上内边距，默认值 0					|
-|padding-bottom {length}|下内边距，默认值 0					|
+|padding {length}		|padding for four edges, default value 0	|
+|padding-left {length}	|default value 0					|
+|padding-right {length}	|default value 0					|
+|padding-top {length}	|default value 0				|
+|padding-bottom {length}|default value 0				|
 
 
-##### 边框
-```border-style``` 设定边框样式，如果四个方向的边框样式不同，可分别设置：
+##### border
+The `border-style` CSS property is a shorthand property that sets the line style for all four sides of an element's border. One can use shorthand for four edges or specify the style for one edge:
 
-|可选值	|描述					|
+|Property	|Describe					|
 |--		|--						|
-|border-left-style {string}		|可选值为 ```solid```， ```dashed```， ```dotted```，默认值 ```solid```	|
-|border-top-style {string}		|可选值为 ```solid```， ```dashed```， ```dotted```，默认值 ```solid```	|
-|border-right-style {string}	|可选值为 ```solid```， ```dashed```， ```dotted```，默认值 ```solid```	|
-|border-bottom-style {string}	|可选值为 ```solid```， ```dashed```， ```dotted```，默认值 ```solid```	|
+|border-left-style {string}		|values `solid` / `dashed` / `dotted`, default value `solid`|
+|border-top-style {string}		|values `solid` / `dashed` / `dotted`, default value `solid`|
+|border-right-style {string}	|values `solid` / `dashed` / `dotted`, default value `solid`|
+|border-bottom-style {string}	|values `solid` / `dashed` / `dotted`, default value `solid`|
 
 
 
-|可选值	|描述					|
+|Property	|Describe					|
 |--		|--						|
 |solid	|实线边框，默认值 ```solid```	|
 |dashed	|方形虚线边框			|
@@ -103,64 +103,64 @@ padding {length}：内边距，内容和边框之间的距离，默认值 0。
 
 
 ##### border-width
-```border-width```：设定边框宽度，非负值, 默认值 0，如果四个方向的边框宽度不同，可分别设置：
+The border-width shorthand CSS property sets the widths of all four sides of an element's border. One can use shorthand for four edges or specify the width for one edge:
 
-|可选值							|描述				|
+|Property							|Describe				|
 |--								|--					|
-|border-width {length}			|非负值, 默认值 0	|
-|border-left-width {length}		|非负值, 默认值 0	|
-|border-top-width {length}		|非负值, 默认值 0	|
-|border-right-width {length}	|非负值, 默认值 0	|
-|border-bottom-width {length}	|非负值, 默认值 0	|
+|border-width {length}			|non-negative, default value 0	|
+|border-left-width {length}		|non-negative, default value 0	|
+|border-top-width {length}		|non-negative, default value 0	|
+|border-right-width {length}	|non-negative, default value 0	|
+|border-bottom-width {length}	|non-negative, default value 0	|
 
 ##### border-color
-```border-color```：设定边框颜色，默认值 ```#000000```，如果四个方向的边框颜色不同，可分别设置：
+The border-color shorthand CSS property sets the color of all sides of an element's border. One can use shorthand for four edges or specify the color for one edge:
 
 
-|可选值						|描述					|
+|Property						|Describe					|
 |--							|--						|
-|border-color {color}		|默认值 ```#000000```	|
-|border-left-color {color}	|默认值 ```#000000```	|
-|border-top-color {color}	|默认值 ```#000000```	|
-|border-right-color {color}	|默认值 ```#000000```	|
-|border-bottom-color {color}|默认值 ```#000000```	|
+|border-color {color}		|default value #000000	|
+|border-left-color {color}	|default value #000000	|
+|border-top-color {color}	|default value #000000	|
+|border-right-color {color}	|default value #000000	|
+|border-bottom-color {color}|default value #000000	|
 
 ##### border-radius
-```border-radius```：设置边框的圆角，默认值 0，如果四个方向的圆角弧度不同，可分别设置：
+border-radius property rounds the corners of an element's outer border edge. One can use shorthand for four corners or specify the radius for one corner:
 
-|可选值								|描述				|
+|Property								|Describe				|
 |--									|--					|
-|border-radius {length}				|非负值, 默认值 0	|
-|border-bottom-left-radius {length}	|非负值, 默认值 0	|
-|border-bottom-right-radius {length}|非负值, 默认值 0	|
-|border-top-left-radius {length}	|非负值, 默认值 0	|
-|border-top-right-radius {length}	|非负值, 默认值 0	|
+|border-radius {length}				|default value 0 which means the corner is a right angle.	|
+|border-bottom-left-radius {length}	|non-negative, default value 0	|
+|border-bottom-right-radius {length}|non-negative, default value 0	|
+|border-top-left-radius {length}	|non-negative, default value 0	|
+|border-top-right-radius {length}	|non-negative, default value 0	|
 
-> ```border-radius```和```border-width```定义了圆心角为90度的椭圆弧的长轴和半长轴的大小。如果邻接两边```border-radius```(或```border-width```不一致，nvue绘制的边框曲线可能不够平滑。
+> `border-radius` defines the radius of a quarter ellipse that defines the shape of the corner of the outer border edge by definition, but weex may not render as expected if you need a smooth transition between different `border-radius` or `border-width` on adjoining sides.
 
 
-##### 外边距
-margin {length}：外边距，元素和元素之间的空白距离，默认值 0。与标准 CSS 类似，margin 支持简写，也可分解为四边：
+##### margin
+margin specifies the space around elements which is outside the border. One can use shorthand for four edges or specify the margin for one edge:
 
-|可选值					|描述								|
+|Property					|Describe								|
 |--						|--									|
-|margin {length}		|上、右、下、左四边外边距，默认值 0	|
-|margin-left {length}	|左外边距，默认值 0					|
-|margin-right {length}	|右外边距，默认值 0					|
-|margin-top {length}	|上外边距，默认值 0					|
-|margin-bottom {length}	|下外边距，默认值 0					|
+|margin {length}		|margin for four edges, default value 0	|
+|margin-left {length}	|margin for left edge, default value 0					|
+|margin-right {length}	|margin for left edge, default value 0					|
+|margin-top {length}	|margin for left edge, default value 0					|
+|margin-bottom {length}	|margin for bottom edge, default value 0					|
 
 
 
 
-##### Android 兼容性
+##### Only for Android
 
-尽管 ```overflow: hidden``` 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去剪切它的子 ```view```。
+Although `overflow:hidden` is default on Android, a view will not clip its children according to `border-radius` unless all the following conditions meet.
 
-- 父view是```view```, ```cell```, ```refresh``` 或 ```loading```。
-- 系统版本是 Android 4.3 或更高。
-- 系统版本不是 Andorid 7.0。
-- 父 view 没有 ```background-image``` 属性或系统版本是 Android 5.0 或更高。
+- The view type is `div`, `a`, `cell`, `refresh` or `loading`.
+- OS version is Android 4.3 or higher.
+- OS version is not Android 7.0
+- A view does not have `background-image` property nor OS version is Android 5.0 or higher.
 
 
 
@@ -168,81 +168,81 @@ margin {length}：外边距，元素和元素之间的空白距离，默认值 0
 ## Flexbox
 
 
-### Flex 容器
+### Flexbox
 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
 
-nvue布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个nvue元素可以容纳其他元素，那么它就成为 flex 容器。
+Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
 
-> 文档中未说明的 flexbox 属性**均不支持**：如 ```order```、```flex-grow``` 、```flex-shrink``` 、 ```flex-basis```、```align-content```、```align-self``` 等。
+> Only styles listed below is supported, other style like `order` and `flex-flow` are not supported.
 
-**在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 ```display: flex;``` 属性。**
+**Flexbox is the default and only style model in Weex, so you don't have to add display: flex; in a container.**
 
 
 ### flex-direction
 	
-定义了 flex 容器中 flex 成员项的排列方向，默认值为 ```column```
+The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
 
-|可选值			|描述								|
+|Property			|Describe								|
 |--				|--									|
-|column			|竖排，从上到下排列					|
-|column-reverse	|反向竖排，排布方向与```flex-direction:column```相反|
-|row			|横排，从左到右排布						|
-|row-reverse	|反向横排，排布方向与```flex-direction:row```相反	|
+|column			|The flex container's main-axis is vertical. The main-start and main-end points is top and bottom.				|
+|column-reverse	|Behaves the same as column but the main-start and main-end are permuted.|
+|row			|The flex container's main-axis is horizontal and defined to be the same as direction. The main-start and main-end points are the same as the direction.					|
+|row-reverse	|Behaves the same as row but the main-start and main-end points are permuted	|
 
 
 
 ### flex-wrap
 	
-决定了 flex 成员项在一行还是多行分布，默认值为```nowrap```
+The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. The default value is nowrap
 
-|可选值			|描述												|
+|Property			|Describe												|
 |--				|--													|
-|nowrap			| 不换行，flex 成员项在一行排布，排布的开始位置由direction指定	|
-|wrap			| 换行，第一行在上方，flex 成员项在多行排布，排布的开始位置由direction指定	|
-|wrap-reverse	|换行，第一行在下方，行为类似于```wrap```，排布方向与其相反						|
+|nowrap			| The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. This is the default value.	|
+|wrap			| The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.	|
+|wrap-reverse	|Behaves the same as wrap but cross-start and cross-end are permuted.						|
 
 
 
 ### justify-content
 	
-定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 ```flex-start```
+The CSS justify-content property defines how Weex distributes space between and around content items along the main-axis of a flex container. The default value is `flex-start`.
 
-|可选值			|描述										|
+|Property			|Describe										|
 |--				|--											|
-|flex-start		|左对齐，所有的 flex 成员项都排列在容器的前部	|
-|flex-end		|右对齐，则意味着成员项排列在容器的后部				|
-|center			|居中，即中间对齐，成员项排列在容器中间、两边留白		|
-|space-between	|两端对齐，空白均匀地填充到 flex 成员项之间	|
+|flex-start		|The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side.	|
+|flex-end		|The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side.			|
+|center			|The items are packed flush to each other toward the center of the alignment container along the main axis.		|
+|space-between	|The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.	|
 |space-around	|表示 flex 成员项两侧的间隔相等，所以，成员项之间的间隔比成员项与边框的间隔大一倍	|
 
 
-![图片描述文字](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9610d190-2f17-11eb-97b7-0dc4655d6e68.png)
+![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9610d190-2f17-11eb-97b7-0dc4655d6e68.png)
 
 
 
 	
 ### align-items
 	
-定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。
+The CSS align-items property sets the align-self value on all direct children as a group. It controls the alignment of items on the cross Axis. The default value is `stretch`.
 
-|可选值		|描述								|
+|Property		|Describe								|
 |--			|--									|
-|stretch	|即拉伸高度至 flex 容器的大小			|
-|flex-start	|上对齐，所有的成员项排列在容器顶部	|
-|flex-end	|下对齐，所有的成员项排列在容器底部	|
-|center		|中间对齐，所有成员项都垂直地居中显示	|
+|stretch	|Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.			|
+|flex-start	|The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.	|
+|flex-end	|The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.	|
+|center		|The flex items' margin boxes are centered within the line on the cross-axis.	|
 
-![图片描述文字](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ad305030-2f17-11eb-b680-7980c8a877b8.png)
+![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ad305030-2f17-11eb-b680-7980c8a877b8.png)
 
 ### flex
 	
-flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。
-flex {number}：值为 number 类型。
-- 如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。
-- 经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
-- 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。
+The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.
 
-**注意**
+If all of the flex items set flex: 1, they will have equal width or height on direction of flex container's flex-direction. If there are two flex items, with one setting flex: 1, and the other setting flex: 2, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set flex, they will be aligned depending on the container's justify-content property.
+
+The following code snippet show three div with the same height
+
+**Notes**
 	
 **Flex 成员项暂不支持 ```flex-shrink``` 、 ```flex-basis```、```align-content``` 属性**。
 
@@ -314,7 +314,7 @@ flex {number}：值为 number 类型。
 
 设置定位类型。默认值为 ```relative```。
 
-|可选值		|描述													|
+|Property		|Describe													|
 |--			|--														|
 |relative	|是默认值，指的是相对定位									|
 |absolute	|绝对定位，以元素的容器作为参考系						|
@@ -354,55 +354,55 @@ flex {number}：值为 number 类型。
 
 
 
-> Android 兼容性
+> Only for Android
 
-如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 ```overflow``` 默认值为 ```hidden```，但目前 Android 暂不支持设置 ```overflow: visible```。
+If your component is bigger than its parent, it will be partial invisible as Weex on Android only supports `overflow:hidden`.
 
 
 ## Transition 
 
-```transition```允许 CSS 的属性值在一定的时间区间内平滑地过渡。
+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.
 #### transition-property
-设置过渡动画的属性名，设置不同样式 ```transition``` 效果的键值对，默认值为空，表示不执行任何过渡效果
+Allows the name of the transitional animation to set the value of the different styles transition effect, the default value is empty, that does not perform any transition, the following table lists all the legitimate parameters of the property:
 
 
-|参数名				|描述				|
+|Property				|Describe				|
 |--					|--					|
-|width				|宽度参与过渡动画		|
-|height				|高度参与过渡动画		|
-|top				|顶部距离参与过渡动画	|
-|bottom				|底部距离参与过渡动画	|
-|left				|左侧距离参与过渡动画	|
-|right				|右侧距离参与过渡动画	|
-|background-color	|背景颜色参与过渡动画	|
-|opacity			|不透明度参与过渡动画	|
-|transform			|变换类型参与过渡动画	|
+|width				|The transition is performed when the width of the component is involved in the animation		|
+|height				|The transition is performed when the height of the component is involved in the animation		|
+|top				|The transition is performed when the top of the component is involved in the animation	|
+|bottom				|The transition is performed when the bottom of the component is involved in the animation	|
+|left				|The transition is performed when the left of the component is involved in the animation	|
+|right				|The transition is performed when the right of the component is involved in the animation	|
+|background-color	|The transition is performed when the backgroundColor of the component is involved in the animation	|
+|opacity			|The transition is performed when the opacity of the component is involved in the animation	|
+|transform			|The transition is performed when the transform of the component is involved in the animation	|
 
 
 
 
 #### transition-duration
-指定过渡的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果。
+Specifies the duration of the transition transition (in milliseconds). The default value is 0, indicating that there is no animation.
 
 #### transition-delay
-指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 0，表示没有延迟，在请求后立即执行过渡。
+Specifies the time interval (in milliseconds or seconds) between the request transition transition and the transition transition. The default value is 0, indicating that there is no delay, and the transition transition is performed immediately after the request.
 
 #### transition-timing-function
-描述过渡执行的速度曲线，用于使过渡更为平滑。默认值是 ```ease```。下表列出了所有合法的属性：
+Describes the velocity curve of the transition transition, which is used to make the transition transition smoother. The default is ease. The following table lists all the valid attributes:
 
 
-|参数名							|描述																																			|
+|Property							|Describe																																			|
 |--								|--																																				|
-|ease							|transition 过渡逐渐变慢的过渡效果																												|
-|ease-in						|transition 过渡慢速开始，然后变快的过渡效果																									|
-|ease-out						|transition 过渡快速开始，然后变慢的过渡效果																									|
-|ease-in-out					|transition 过渡慢速开始，然后变快，然后慢速结束的过渡效果																						|
-|linear							|transition 过渡以匀速变化																														|
-|cubic-bezier(x1, y1, x2, y2)	|使用三阶贝塞尔函数中自定义 transition 变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅  [cubic-bezier](https://cubic-bezier.com/?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD#.17,.67,.83,.67)和 [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve?spm=a2c7j.-zh-docs-styles-common-styles.0.0.3f952164z39lZD)	|
+|ease							|The transition gradually slow down the transition effect																												|
+|ease-in						|The transition starts slowly and then becomes faster for the transition effect |
+|ease-out						|The transition starts quickly and then slows the transition effect|
+|ease-in-out					|The transition starts slowly, then goes fast and then slowly ends the transition effect|
+|linear							|The transition changes at constant speed|
+|cubic-bezier(x1, y1, x2, y2)	|Using the custom transition in the third-order Bessel function, the parameter values of the function must be between 0 and 1. For more information on three times Bessel, see [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).	|
 
 
 	
-#### 示例
+#### Example
 
 
 ``` html
@@ -459,7 +459,7 @@ flex {number}：值为 number 类型。
 应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
 
 
-|参数名							|描述																																			|
+|Property							|Describe																																			|
 |--								|--																																				|
 |`translateX({<length/percentage>})`	|X 轴方向平移，支持长度单位或百分比。																												|
 |`translateY({<length/percentage>})`	|Y 轴方向平移，支持长度单位或百分比。																	|
@@ -474,11 +474,12 @@ flex {number}：值为 number 类型。
 |`perspective(<length>)`|指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。Android 4.1及以上版本支持。|
 |`transform-origin {length/percentage/关键字(top/left/right/bottom)}:`|设置一个元素变形的原点，仅支持 2D 坐标。|
 
-> 除了```perspective```和```transform-origin```，```transition```支持了```transform```的全部能力。 其中transform的```rotate``` 和```rotatez``` 等效.
+> Consider use `transition` instead, which supports all the style that `transform` supports except for `transform-origin` and `perspective`
+`rotate` is the same as `rotateZ`.
 
 
 	
-#### 示例
+#### Example
 
 
 ``` html
@@ -587,65 +588,64 @@ flex {number}：值为 number 类型。
 <img width="300px" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/810e5de0-3088-11eb-b997-9918a5dda011.gif" />
 
 
-## 伪类
+## Pseudo class
 
 
-|参数名		|描述								|
+|Property		|Describe								|
 |--			|--									|
 |active		|所有组件都支持						|
 |focus		|只有 ```input``` 组件和 ```textarea``` 组件支持|
 |disabled	|只有 ```input``` 组件和 ```textarea``` 组件支持|
 |enabled	|只有 ```input``` 组件和 ```textarea``` 组件支持|
 
-**注意**
-> 同时生效的时候，优先级高覆盖优先级低。
-> 例如：```input:active:enabled``` 和 ```input:active``` 同时生效，前者覆盖后者
+**Notes**
+> the high priority override low priority when rules take effect at the same time.
+> such as: "input:active:enabled" will override "input:active".
 
-- 互联规则如下所示
+- the interconnection rule as follow
 
 <img width="400px" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/f3069420-2f17-11eb-8a36-ebb87efcf8c0.png" />
 
 
-## 线性渐变
+## Linear-gradient 
 
-所有组件均支持线性渐变。[CSS3 渐变](https://www.w3cschool.cn/css3/oj26bfli.html)
-你可以通过  ``` background-image ```属性创建线性渐变。
+Weex support linear-gradient background, You can see [W3C description of the gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
+You can use linear gradient by `background-image` property.
 ``` javascript
 	background-image:linear-gradient(to bottom right,#AD18F9,#05DFC7);
 ```
 
-只支持两种颜色的渐变，渐变方向如下：
+Weex currently supports two color gradients. The direction of the gradient is as follows:
 
-|渐变方向		|描述				|
+|Value		|Describe				|
 |--				|--					|
-|to right		|从左向右渐变		|
-|to left		|从右向左渐变		|
-|to bottom		|从上到下渐变		|
-|to top			|从下到上渐变		|
-|to bottom right|从左上角到右下角	|
-|to top left	|从右下角到左上角	|
+|to right		|From left to right		|
+|to left		|From right to left		|
+|to bottom		| From top to bottom		|
+|to top			|From bottom to top		|
+|to bottom right|From the upper left corner to the lower right corner	|
+|to top left	|From the lower right corner to the upper left corner	|
 
-**注意**
+**Notes**
 
-> ```background-image``` 优先级高于 ```background-color```，这意味着同时设置 ```background-image``` 和 ```background-color```，```background-color``` 被覆盖。
-> ```background``` 不支持简写。
+> `background-image` and `background-color` are set at the same time, `background-image` precedes `background-color`.
+> Do not use shorthand property such as `background`.
 > 
-> **目前暂不支持 radial-gradient（径向渐变）。**
+> **`radial-gradient` is not currently supported, do not use it.**
 
 
 <img width="300px" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/8f70e4e0-308b-11eb-97b7-0dc4655d6e68.PNG" />
 
 
-## 阴影@boxshadow
+## Box-shadow@boxshadow
 
-### IOS平台：阴影```box-shadow```@ios-box-shadow
+### Weex supports box-shadow in iOS： inset,offset-x,offset-y, blur-radius,color
 
 	
 	{box-shadow:inset offset-x offset-y blur-radius color}
-	{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径  阴影颜色}
 
 
-|参数			|描述																										|
+|Property			|Describe																										|
 |--				|--																											|
 |inset（可选）	|默认阴影在边框外。使用 ```inset``` 后，阴影在边框内（即使是透明边框），背景之上内容之下。						|
 |offset-x		|设置水平偏移量，如果是负值则阴影位于元素左边。																|
@@ -653,14 +653,14 @@ flex {number}：值为 number 类型。
 |blur-radius	|设置模糊半径，px 单位长度值，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。	|
 |color			|设置阴影颜色																								|
 
-示例
+Example
 ``` css
 	.box4 {
 	    box-shadow: inset 3px 5px 20px rgb(255, 69, 0);
 	}
 ```
 
-**注意**
+**Notes**
 - 目前仅 iOS 支持 ```box-shadow``` 属性，Android 暂不支持，可以使用```elevation```或者图片代替。
 - 每个元素只支持设置一个阴影效果，不支持多个阴影同时作用于一个元素。
 
@@ -682,7 +682,7 @@ Android平台weex对阴影样式(box-shadow)支持不完善，如设置圆角边
 ```
 
 
-#### 注意
+#### Notes
 - 设置```elevation```属性产生的阴影暂时无法修改颜色
 - 设置```elevation```后当前组件的层级会高于其他未设置elevation组件的层级，都设置```elevation```值域越大则层级越高！组件覆盖的场景需要留意
 - 为了避免```elevation```属性的阴影效果与阴影样式(```box-shadow```)冲突，设置```elevation```属性后```box-shadow```样式失效
@@ -694,7 +694,7 @@ Android平台weex对阴影样式(box-shadow)支持不完善，如设置圆角边
 ## 文本样式
 
 ### color
-color {color}：文字颜色，支持如下字段：
+`color`: &lt;colors&gt; this property set the foreground color of an component's text content.. The property color support multiple formats of values.
  * RGB（ rgb(255, 0, 0) ） 
  * RGBA（ rgba(255, 0, 0, 0.5) ） 
  * 十六进制（ #ff0000 ）；
@@ -704,38 +704,38 @@ color {color}：文字颜色，支持如下字段：
 > 只有```text```标签可以设置字体颜色
 
 ### font-size
-font-size {number}：文字大小，只有```text```标签可以设置字体大小
+`font-size`: &lt;length&gt; this property specifies the size of the font.
 
 ### font-style
-font-style {string}：字体类别。可选值 ```normal``` | ```italic```，默认为 ```normal```。
+`font-style`: &lt;enum&gt; `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
 
 ### font-weight
-font-weight {string}：字体粗细程度。默认值: ```normal```；
+This property indicate the weight of the text.
 
-- 可选值: ```normal```, ```bold```, 100, 200, 300, 400, 500, 600, 700, 800, 900
-- ```normal``` 等同于 400, ```bold``` 等同于 700；
-- iOS 支持 9 种 ```font-weight```值；Android 仅支持 400 和 700, 其他值会设为 400 或 700
-- 类似 ```lighter```, ```bolder``` 这样的值暂时不支持
+- values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
+- normal is equal to 400, bold equel to 700
+- ios support showing 9 kind of font-weight.android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700.
+- Some standard values like `lighter`, `bolder`, number unit are not supported.
 
 ### text-decoration
-```text-decoration {string}```：字体装饰。默认值为 ```none```。
+`text-decoration`: &lt;enum&gt; `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
 
-|可选值			|描述						|
+|Property			|Describe						|
 |--				|--							|
 |none			|默认。定义标准的文本		|
 |underline		|定义文本下的一条线		|
 |line-through	|定义穿过文本下的一条线	|
 
 
-> 只支持 ```text``` 和 ```ricthext```
+> Only support for `<text>` and `<ricthext>`
 > 
 > 不支持 ```text-decoration:overline```
 
 
 ### text-align
-```text-align {string}```：对齐方式。默认值为 ```left```。
+`text-align`: &lt;enum&gt; `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
 
-|可选值	|描述				|
+|Property	|Describe				|
 |--		|--					|
 |left	|把文本排列到左边	|
 |center	|把文本排列到中间	|
@@ -745,31 +745,27 @@ font-weight {string}：字体粗细程度。默认值: ```normal```；
 
 
 ### font-family
-```font-family {string}```：设置字体。这个设置不保证在不同平台，设备间的一致性。
-如所选设置在平台上不可用，将会降级到平台默认字体。
-如果需要加载自定义字体，请参考相关[DOM.addRule](/nvue-api?id=addrule)
+`font-family`:&lt;string&gt; this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref [dom.addRule](/nvue-api?id=addrule) instead.
 
 ### text-overflow
-```text-overflow {string}```：设置内容超长时的省略样式。
+`text-overflow`:&lt;enum&gt; `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.
 
-|可选值		|描述							|
+|Property		|Describe							|
 |--			|--								|
 |clip		|修剪文本						|
 |ellipsis	|显示省略符号来代表被修剪的文本	|
-> 只支持 ```text``` 和 ```ricthext```
+> Only support for `<text>` and `<ricthext>`
 
 ### lines
-```lines {number}```: 正整数，指定最大文本行数，默认```lines```值为0，表示不限制最大行数```lines```。如果文本不够长，实际展示行数会小于指定行数。
+`lines`: &lt;number&gt; positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value.
 
 ### line-height
-line-height {length}: 正整数，每行文字高度。```line-height```是 top 至 bottom的距离。
-```line-height```与```font-size```没有关系，因为```line-height```被 top 和 bottom 所限制，
-```font-size``` 被 glyph 所解析。```line-height```和```font-size```相等一般会导致文字被截断。
+`line-height`: &lt;length&gt; The line height of every line in the text. `line-height` is the space between top and bottom.`line-height` There is no relationship between `line-height` and `font-size`, as `line-height` is restricted by top and bottom, `font-size` is interpreted by glyph. Usually but not always, `line-height` and `font-size` with the same value will cause the text clipped.
 
 ### word-wrap
-```word-wrap:<string>```  对nvue来说 ```anywhere``` 表示在以字符为最小元素做截断换行，其它值或不指定该属性，都以英文单词为单位进行换行。
+`word-wrap`:&lt;string&gt; `break-word` | `normal` | `anywhere`. This property determins word wrap mode. For Weex, `anywhere` means clipping at character boundaries, other values or by default we break at word boundaries.
 
-|可选值		|描述								|
+|Property		|Describe								|
 |--			|--									|
 |break-word	|在长单词或 URL 地址内部进行换行	|
 |normal		|只在允许的断字点换行				|
diff --git a/docs/nvue-event.md b/docs/nvue-event.md
index 2e13dda2f..660bf5551 100644
--- a/docs/nvue-event.md
+++ b/docs/nvue-event.md
@@ -1,60 +1,59 @@
 
-```Weex``` 提供了通过事件触发动作的能力，例如在用户点击组件时执行 ```JavaScript```。
-下面列出了可被添加到 ```Weex``` 组件上以定义事件动作的属性：
+Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Below are the common event attributes that can be added to weex components to define event actions.
 
-### 事件穿透
+### Event penetration
 
-> Android和iOS下原生事件传递机制不同，这里仅针对iOS
+> The principle of native event delivery under Android and iOS is different, only for iOS here.
 
-当一个父View存在多个同级子View时，由于iOS会选择层级最高的View来响应事件，底层的View的事件永远都不会响应。
+When a parent view has multiple peer views, iOS will select the highest level View to respond to the event, and the underlying view event will never be responded.
 
-Weex在```view```组件中增加了```eventPenetrationEnabled```属性，当值为true（默认为false）时，View的子View仍能正常响应事件，但View自身将不会响应事件。
+Weex add attribute `eventPenetrationEnabled` to `<div>` component. When the value is `true`(default would be `false`), the view's children views still respond to the event normally, while the view itself will not respond to the event, but pass the event to the lower level View.
 
 
-### View交互性
+### View interactivity
 
-Weex在```view```组件中增加了```userInteractionEnabled```属性，当值为false（默认为true）时，View及其子View均不响应事件，事件向下层View传递。
+Weex add attribute `userInteractionEnabled` to `<div>` component. When the value is `false`(default would be `true`), neither the view nor its children views respond to the event. The event is passed to the lower layer View.
 
 **longpress**
 
-如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。
+If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
 
-**事件对象**
+**event object**
 
 
 |key			|value		|备注																|
 |--				|--				|--																	|
 |type			|longpress|																		|
-|target		|					|触发长按事件的目标组件							|
-|timestamp|					|长按事件触发时的时间戳(不支持 H5)	|
+|target		|					|The target component where the event is triggered							|
+|timestamp|					|Timestamp when event is triggered	|
 
 
 **Appear**
 
-如果一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
+If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
 
-**事件对象**
+**event object**
 
-|key		|value					|备注							|
+|key		|value					|notes							|
 |--			|--						|--								|
 |type		|appear					|								|
-|target		|						|触发 Appear 事件的组件对象		|
-|timestamp	|						|事件被触发时的时间戳(不支持 H5)|
-|direction	| ```up```或 ```down```	|触发事件时屏幕的滚动方向		|
+|target		|						|The target component where the event is triggered		|
+|timestamp	|						|Timestamp when event is triggered|
+|direction	| ```up```or ```down```	|The direction in which the scroller is scrolling.		|
 
 
 **Disappear**
 
-如果一个位于某个可滚动区域内的组件被绑定了 ```disappear``` 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
+If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
 
-**事件对象**
+**event object**
 
 |key			|value									|备注														|
 |--				|--											|--															|
 |type			|disappear							|																|
-|target		|												|触发 Disappear 事件的组件对象	|
-|timestamp|												|事件被触发时的时间戳(不支持 H5)|
-|direction| ```up```或 ```down```	|触发事件时屏幕的滚动方向				|
+|target		|												|The target component where the event is triggered	|
+|timestamp|												|Timestamp when event is triggered|
+|direction| ```up```or ```down```	|The direction in which the scroller is scrolling. Could be `up` or `down`				|
 
 
 
-- 
GitLab