Built-in Transition ​

You can use Element's built-in transitions directly. Before that, please read the transition docs.

Fade ​

We have two fading effects: elp-fade-in-linear and elp-fade-in.

.elp-fade-in-linear
.elp-fade-in

Zoom ​

el-zoom-in-left, el-zoom-in-center, el-zoom-in-top and el-zoom-in-bottom are provided.

.elp-zoom-in-left
.elp-zoom-in-center
.elp-zoom-in-top
.elp-zoom-in-bottom

Collapse ​

For collapse effect, use the el-collapse-transition component.

el-collapse-transition
el-collapse-transition

On-demand import ​

main.ts
ts
// collapse
import { ElCollapseTransition } from 'element-plus'
// fade/zoom
import 'element-plus/theme-chalk/base.css'
import App from './App.vue'

const app = createApp(App)
app.component(ElCollapseTransition.name, ElCollapseTransition)