ikmkj/biji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(SidebarMenu): 优化菜单项淡入淡出效果

Browse Source 
- 为菜单项文本和操作添加过渡效果，实现平滑淡入淡出
- 修改菜单项折叠时的样式，使用透明度和宽度变化来实现淡出效果
This commit is contained in:
ikmkj
2025-08-08 20:31:08 +08:00
parent 22f0e97575
commit 460337abfa
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
biji-qianduan/src/components/home/SidebarMenu.vue
View File

@@ -222,12 +222,16 @@ const renderMenu = (item) => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
flex-grow: 1; flex-grow: 1;
transition: opacity 0.2s ease; /* Add transition for smooth fade */
opacity: 1;
} }
.menu-item-actions { .menu-item-actions {
display: none; display: none;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
transition: opacity 0.2s ease;
opacity: 1;
} }
.el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions, .el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions,
@@ -237,7 +241,8 @@ const renderMenu = (item) => {
.el-menu--collapse .menu-item-text, .el-menu--collapse .menu-item-text,
.el-menu--collapse .menu-item-actions { .el-menu--collapse .menu-item-actions {
display: none; opacity: 0; /* Fade out instead of just disappearing */
width: 0; /* Ensure it takes no space */
} }
.edit-icon, .delete-icon { .edit-icon, .delete-icon {