Commit 50134154 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕

Transition: update docs

parent 828d591d
## 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: () => ({
......
## 内置过渡动画
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment