mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
851242e317
* feat(docs): add source and contributors closes #6038 * feat(docs): ignore contributor when dev * ci: add github token * fix: lint * fix: page * fix: placeholder * ci: remove preview
49 lines
838 B
Markdown
49 lines
838 B
Markdown
---
|
|
title: Built-in Transitions
|
|
lang: en-US
|
|
---
|
|
|
|
# Built-in Transition
|
|
|
|
You can use Element's built-in transitions directly.
|
|
Before that, please read the [transition docs](https://vuejs.org/guide/built-ins/transition.html).
|
|
|
|
## Fade
|
|
|
|
:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
|
|
|
|
transitions/fade
|
|
|
|
:::
|
|
|
|
## Zoom
|
|
|
|
:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
|
|
|
|
transitions/zoom
|
|
|
|
:::
|
|
|
|
## Collapse
|
|
|
|
For collapse effect, use the `el-collapse-transition` component.
|
|
|
|
:::demo
|
|
|
|
transitions/collapse
|
|
|
|
:::
|
|
|
|
## On-demand import
|
|
|
|
```ts
|
|
// collapse
|
|
import { ElCollapseTransition } from 'element-plus'
|
|
// fade/zoom
|
|
import 'element-plus/lib/theme-chalk/base.css'
|
|
import App from './App.vue'
|
|
|
|
const app = createApp(App)
|
|
app.component(ElCollapseTransition.name, ElCollapseTransition)
|
|
```
|