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。