elementui动画
ElementUI 动画使用指南
ElementUI 提供了内置的过渡动画效果，主要通过 Vue 的 <transition> 组件实现。以下为常见动画应用方法：
淡入淡出动画
通过 el-fade-in-linear 或 el-fade-in 类名实现：
<transition name="el-fade-in-linear">
<div v-show="show">内容区域</div>
</transition>缩放动画
使用 el-zoom-in-center 等类名：
<transition name="el-zoom-in-center">
<el-button v-if="show">按钮</el-button>
</transition>折叠动画
适用于高度变化的元素：
<el-collapse-transition>
<div v-show="show">可折叠内容</div>
</el-collapse-transition>组件内置动画
部分组件自带动画效果：
<el-alert
title="提示"
type="success"
effect="dark"
:closable="false">
</el-alert>自定义动画
可通过覆盖 CSS 实现个性化效果：
.custom-transition-enter-active {
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.custom-transition-leave-active {
transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}动画效果对照表
| 动画名称 | 适用场景 |
|---|---|
| el-fade-in | 通用淡入效果 |
| el-zoom-in-top | 下拉菜单展开 |
| el-collapse-transition | 高度变化元素 |
| el-fade-in-linear | 线性渐变效果 |
注意：所有动画需配合 v-show 或 v-if 控制显示状态。建议在组件挂载后通过数据驱动触发动画，避免直接操作 DOM。
