Transición incorporada

Puede usar directamente las transiciones incorporadas en Element. Antes de eso, por favor lea los documentos de transición.

Fade

Tenemos dos efectos de fading: el-fade-in-linear y el-fade-in.

.el-fade-in-linear
.el-fade-in

Zoom

También tenemos zoom: el-zoom-in-center, el-zoom-in-top y el-zoom-in-bottom.

.el-zoom-in-center
.el-zoom-in-top
.el-zoom-in-bottom

Colapsar

Para efectos de colapsado use el componente el-collapse-transition.

el-collapse-transition
el-collapse-transition

Importar a petición

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)