Browse Source

Transition: update docs

Leopoldthecoder 8 years ago
parent
commit
5013415426
2 changed files with 12 additions and 19 deletions
  1. 7 18
      examples/docs/en-US/transition.md
  2. 5 1
      examples/docs/zh-CN/transition.md

+ 7 - 18
examples/docs/en-US/transition.md

@@ -1,10 +1,10 @@
 ## Built-in transition
 
-If you want, you can use Element built-in transition directly. Of course you need to know [vue#transition](https://vuejs.org/v2/api/#transition).
+You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition).
 
 ### fade
 
-:::demo You can use `el-fade-in-linear` and `el-fade-in`.
+:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
 ```html
 <template>
   <div>
@@ -33,6 +33,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -47,7 +48,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
 
 ### zoom
 
-:::demo You can use `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom`.
+:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
 ```html
 <template>
   <div>
@@ -81,6 +82,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -96,7 +98,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
 
 ### collapse
 
-`el-collapse-transition` is a special component that implement collapse transtion.
+For collapse effect, use the `el-collapse-transition` component.
 
 :::demo
 ```html
@@ -127,6 +129,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -139,20 +142,6 @@ If you want, you can use Element built-in transition directly. Of course you nee
 ```
 :::
 
-<style>
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    border-radius: 4px;
-    background-color: #20A0FF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    margin-right: 20px;
-    box-sizing: border-box;
-  }
-</style>
-
 <script>
   module.exports = {
     data: () => ({

+ 5 - 1
examples/docs/zh-CN/transition.md

@@ -1,6 +1,6 @@
 ## 内置过渡动画
 
-Element 内应用在部分组件的过渡动画,你也可以直接使用。具体用法参考 [transition 组件](https://cn.vuejs.org/v2/api/#transition)
+Element 内应用在部分组件的过渡动画,你也可以直接使用。在使用之前请阅读 [transition 组件文档](https://cn.vuejs.org/v2/api/#transition) 
 
 ### fade 淡入淡出
 
@@ -33,6 +33,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -81,6 +82,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -127,6 +129,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;
@@ -143,6 +146,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
+    height: 100px;
     border-radius: 4px;
     background-color: #20A0FF;
     text-align: center;