github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Transition: update docs

pull/4417/head^2
Leopoldthecoder 2017-04-21 11:55:41 +08:00 committed by 杨奕
parent 828d591d40
commit 5013415426
2 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
examples/docs/en-US/transition.md
View File

@ -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: () => ({

6
examples/docs/zh-CN/transition.md
View File

@ -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;