mirror of https://github.com/ElemeFE/element
Transition: update docs
parent
828d591d40
commit
5013415426
|
@ -1,10 +1,10 @@
|
||||||
## Built-in transition
|
## 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
|
### 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
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
@ -33,6 +33,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -47,7 +48,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
|
||||||
|
|
||||||
### zoom
|
### 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
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
@ -81,6 +82,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -96,7 +98,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
|
||||||
|
|
||||||
### collapse
|
### collapse
|
||||||
|
|
||||||
`el-collapse-transition` is a special component that implement collapse transtion.
|
For collapse effect, use the `el-collapse-transition` component.
|
||||||
|
|
||||||
:::demo
|
:::demo
|
||||||
```html
|
```html
|
||||||
|
@ -127,6 +129,7 @@ If you want, you can use Element built-in transition directly. Of course you nee
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
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>
|
<script>
|
||||||
module.exports = {
|
module.exports = {
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
## 内置过渡动画
|
## 内置过渡动画
|
||||||
|
|
||||||
Element 内应用在部分组件的过渡动画,你也可以直接使用。具体用法参考 [transition 组件](https://cn.vuejs.org/v2/api/#transition)。
|
Element 内应用在部分组件的过渡动画,你也可以直接使用。在使用之前请阅读 [transition 组件文档](https://cn.vuejs.org/v2/api/#transition) 。
|
||||||
|
|
||||||
### fade 淡入淡出
|
### fade 淡入淡出
|
||||||
|
|
||||||
|
@ -33,6 +33,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -81,6 +82,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -127,6 +129,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -143,6 +146,7 @@ Element 内应用在部分组件的过渡动画,你也可以直接使用。具
|
||||||
.transition-box {
|
.transition-box {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #20A0FF;
|
background-color: #20A0FF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in New Issue