如何不使用外部库实现div侧边栏宽度切换的平滑过渡效果

你当前代码过渡不生效的核心原因通常是过渡属性未精准匹配、内容撑开父元素宽度或布局规则干扰，按以下步骤修改即可实现平滑过渡： #

可用代码示例（Tailwind环境） #

直接替换你原有的div代码即可：

<div className={`h-full transition-width ease-linear duration-200 overflow-hidden flex-shrink-0 ${isToggle ? 'w-24' : 'w-96'}`}>

原生CSS实现方案（无框架依赖） #

如果不使用Tailwind，直接给侧边栏添加以下样式即可：

/* 侧边栏基础样式 */
.sidebar {
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s linear;
}
/* 折叠状态 */
.sidebar.collapsed {
  width: 6rem;
}
/* 展开状态 */
.sidebar.expanded {
  width: 24rem;
}

JS中只需要根据布尔变量切换collapsed和expanded类即可。 #

异常排查点 #

如果修改后仍无过渡效果，检查以下两项：

• 打开浏览器开发者工具的元素样式面板，确认transition属性没有被更高优先级的CSS规则覆盖
• 确认侧边栏切换过程中没有修改display属性，过渡效果对display: none的元素不生效

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