elementui特效
Element UI 提供了多种内置特效和动画效果，可以通过组件属性或 CSS 类实现。以下是常见的特效实现方法：
使用过渡动画
Element UI 内置了 Vue 的过渡动画，例如 el-collapse 折叠面板展开/收起时的平滑过渡效果。通过添加 transition 属性可以启用默认动画：
<el-collapse-transition>
<div v-show="show">内容区域</div>
</el-collapse-transition>按钮悬停效果
按钮组件支持多种交互状态，通过设置 hover 相关样式增强视觉效果：
<el-button type="primary" :plain="true">悬停时会变深色</el-button>
<el-button type="success" :round="true">圆角悬浮效果</el-button>表格行高亮
为表格添加 highlight-current-row 属性可实现当前行高亮特效：
<el-table :data="tableData" highlight-current-row>
<!-- 列定义 -->
</el-table>弹窗动画效果
对话框组件支持自定义入场/离场动画：
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:show-close="true"
:modal="true"
custom-class="fade-in">
内容
</el-dialog>配合 CSS 定义动画：
.fade-in {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}加载状态特效
按钮和表单组件支持加载状态动画：
<el-button :loading="true">加载中</el-button>
<el-form :model="form" :loading="formLoading">
<!-- 表单项 -->
</el-form>滚动特效
结合 el-scrollbar 组件实现自定义滚动条效果：
<el-scrollbar style="height:200px">
<div v-for="item in 50" :key="item">内容行 {{item}}</div>
</el-scrollbar>通知消息动画
全局通知消息支持多种进入动画：
this.$notify({
title: '提示',
message: '这是一个带动画的通知',
type: 'success',
duration: 2000,
customClass: 'bounce-notice'
})对应 CSS：
.bounce-notice {
animation: bounceInRight 0.5s;
}下拉菜单动画
通过修改 el-dropdown-menu 的样式实现下拉动画：
.el-dropdown-menu__item {
transition: all 0.3s;
}
.el-dropdown-menu__item:hover {
transform: translateX(5px);
}时间选择器特效
为日期选择器添加焦点动画：
.el-date-editor .el-input__inner:focus {
box-shadow: 0 0 5px rgba(64,158,255,.3);
transition: box-shadow 0.3s;
}自定义主题动画
通过修改 SCSS 变量实现全局动画效果调整：
$--transition-time: 0.35s;
$--transition-function: cubic-bezier(0.645, 0.045, 0.355, 1);
