Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
Element
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
CI / CD Analytics
Repository Analytics
Value Stream Analytics
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
林焕东
Element
Commits
50134154
Commit
50134154
authored
Apr 21, 2017
by
Leopoldthecoder
Committed by
杨奕
Apr 28, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Transition: update docs
parent
828d591d
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
12 additions
and
19 deletions
+12
-19
examples/docs/en-US/transition.md
examples/docs/en-US/transition.md
+7
-18
examples/docs/zh-CN/transition.md
examples/docs/zh-CN/transition.md
+5
-1
No files found.
examples/docs/en-US/transition.md
View file @
50134154
## 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
...
@@ -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
...
@@ -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
...
@@ -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
...
@@ -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
...
@@ -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
...
@@ -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: () => ({
...
...
examples/docs/zh-CN/transition.md
View file @
50134154
## 内置过渡动画
## 内置过渡动画
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 内应用在部分组件的过渡动画,你也可以直接使用。具
...
@@ -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 内应用在部分组件的过渡动画,你也可以直接使用。具
...
@@ -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 内应用在部分组件的过渡动画,你也可以直接使用。具
...
@@ -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 内应用在部分组件的过渡动画,你也可以直接使用。具
...
@@ -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;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment