侧边栏展开时图标描述错位：CSS display属性无法动画化的解决方法

问题 #

实现侧边栏收缩/展开动画时，点击箭头触发行为，展开后图标后的描述文本会先出现在图标下方，再滑动到正确位置。使用display:none控制文本显示隐藏无法解决动画问题，添加延迟也无效。

解决方案 #

核心是放弃display:none（该属性无法参与CSS过渡动画），改用支持动画的属性控制文本显示，同时优化布局避免换行：

• 为列表项的链接设置flex布局，确保图标和文本始终在同一行，防止空间不足时换行
• 替换hide类的display:none为width:0、opacity:0、overflow:hidden，并添加过渡动画
• 保持侧边栏宽度变化和文本显示的动画时长一致，让动画同步执行

修改后的代码 #

CSS

body {
    background: #eee;
}

#side_nav {
    background: #242424;
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s ease;
    overflow: hidden; /* 防止内容溢出侧边栏 */
}

#side_nav.shrink {
    min-width: 72px;
    max-width: 72px;
}

.content {
    min-height: 100vh;
    width: 100%;
}

hr {
    height: 3px;
}

hr.h-color {
    background: #eee;
}

.sidebar li.active {
    background: #eee;
    box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);
    border-radius: 8px;
}

.sidebar li.active a,
.sidebar li.active a:hover {
    color: #000;
}

.sidebar li a {
    color: #fff;
    display: flex; /* 用flex布局确保图标和文本同行 */
    align-items: center; /* 垂直居中对齐 */
    white-space: nowrap; /* 强制文本不换行 */
}

/* 隐藏状态的文本样式（支持动画） */
.sidebar ul li span.hide {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 默认显示状态的文本样式 */
.sidebar ul li span {
    width: auto;
    opacity: 1;
    transition: all 0.3s ease;
    margin-left: 0.5rem; /* 保持与图标的间距 */
}

ul {
    transition: all 0.3s ease;
}

.header-box span {
    transition: all 0.3s ease;
}

JavaScript

$(".sidebar ul li").on("click", function() {
    $(".sidebar ul li.active").removeClass("active")
    $(this).addClass("active")
})

$("#switch").on("click", function() {
    $(".header-box span").toggleClass("fs-5")
    $(".sidebar ul li span").toggleClass("hide")
    $("ul").toggleClass("fs-4")
    $(".sidebar").toggleClass("shrink")
})

说明

• flex布局确保图标和文本始终在同一行，不会因为侧边栏宽度变化而换行
• 用width和opacity的过渡替代display:none，让文本显示/隐藏过程平滑，和侧边栏宽度变化同步
• overflow:hidden和white-space:nowrap进一步避免文本错位

内容的提问来源于stack exchange，提问作者ICoded