如何在动画flex容器宽度时保持子容器初始宽高？

我来帮你搞定这个问题！你想要实现slideMe容器的宽度平滑动画，但同时让子元素和背景图容器保持初始宽高对吧？咱们一步步调整代码来实现：

问题分析 #

你原来的代码直接切换flex属性控制宽度，虽然能实现显示/隐藏，但flex作为复合属性，过渡动画的稳定性欠佳，还容易影响容器高度。我们需要单独控制宽度过渡，同时把高度固定下来。

修改后的代码 #

CSS 部分

.flexWrapper {
  display: flex;
  position: relative;
  /* 让容器高度由子元素撑开，固定初始高度 */
  align-items: flex-start;
}

.slideMe {
  background: white;
  /* 初始宽度设为0，隐藏溢出内容 */
  width: 0;
  flex-shrink: 0; /* 防止被其他flex项挤压 */
  overflow: hidden;
  /* 添加平滑的宽度过渡动画 */
  transition: width 0.3s ease;
  /* 继承父容器高度，保持和初始一致 */
  height: inherit;
}

.slideMe.visible {
  /* 展开后的目标宽度，百分比或固定值都可以 */
  width: 30%;
}

/* 假设你的背景图容器类名为.bg-container */
.bg-container {
  flex: 1; /* 占据剩余空间 */
  height: inherit; /* 继承父容器的初始高度 */
  background: url('你的背景图路径') center/cover no-repeat;
}

JavaScript 部分（保留你原有逻辑即可）

$('.close').click(function(){ 
  $('.slideMe').toggleClass('visible'); 
  $('.btn').toggleClass('close'); 
});

关键调整说明 #

• 用width做过渡更可靠：相比直接修改flex属性，单独对width设置过渡动画，浏览器渲染更稳定，动画效果更平滑。
• 固定高度的核心：通过height: inherit让slideMe和背景容器继承flexWrapper的高度，而flexWrapper的高度由你提到的「决定总高度的子div」撑开，这样无论slideMe宽度怎么变，高度都保持初始值。
• 防止挤压：flex-shrink: 0确保slideMe不会被其他flex项压缩，严格遵循我们设置的宽度值。

备选方案（用flex属性实现过渡） #

如果你更倾向于用flex属性控制宽度，也可以这样写（需要明确设置flex-basis的值）：

.slideMe {
  background: white;
  flex: 0 0 0%; /* 初始flex-basis为0 */
  overflow: hidden;
  transition: flex-basis 0.3s ease;
  height: inherit;
}

.slideMe.visible {
  flex: 0 0 30%; /* 展开后flex-basis设为30% */
}

这样也能实现平滑的宽度动画，同时保持高度不变。

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