style(SidebarMenu): 优化菜单项淡入淡出效果
- 为菜单项文本和操作添加过渡效果,实现平滑淡入淡出 - 修改菜单项折叠时的样式,使用透明度和宽度变化来实现淡出效果
This commit is contained in:
@@ -222,12 +222,16 @@ const renderMenu = (item) => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
transition: opacity 0.2s ease; /* Add transition for smooth fade */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-item-actions {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: opacity 0.2s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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-actions {
|
||||
display: none;
|
||||
opacity: 0; /* Fade out instead of just disappearing */
|
||||
width: 0; /* Ensure it takes no space */
|
||||
}
|
||||
|
||||
.edit-icon, .delete-icon {
|
||||
|
||||
Reference in New Issue
Block a user