如何实现元素高度调整、子元素居中动画并修复工具盒跳变问题？

我来帮你拆解这个问题的根源，同时给出具体的修复方案，再聊聊怎么实现更顺滑的尺寸调整和子元素居中动画~

为什么会出现跳变？ #

你遇到的先跳变再动画的问题，主要源于三个核心点：

1. 突变的line-height属性：默认状态下.messenger-tools的line-height是calc(8px + 40px + 8px)（也就是56px），但切换到medium类时，你设置了line-height: unset——这个值无法被过渡动画处理，会导致元素垂直方向突然跳变，然后才执行height的过渡。
2. !important破坏过渡优先级：medium类里的height、width、margin-right都加了!important，这会覆盖默认的过渡规则，部分属性的变化会跳过动画直接生效，造成视觉上的跳变。
3. 绝对定位的子元素无过渡：.list-inline用了position: absolute，它的margin-right变化虽然在transition范围内，但绝对定位的元素位置调整本身就容易出现突兀的变化。

修复跳变的具体方案 #

我们需要让所有影响布局的属性都能平滑过渡，同时优化布局方式来避免突变：

修改后的CSS代码 #

.messenger-tools {
  position: fixed;
  bottom: calc(42px + 20px);
  right: calc(8px + 58px + 8px);
  border-radius: 9999px;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  height: 56px; /* 把calc转为具体数值，方便过渡计算 */
  width: calc(8px + ((40px + 8px) * 3) + 8px);
  line-height: 56px;
  display: flex; /* 用flex实现更稳定的居中，替代line-height */
  align-items: center;
  justify-content: flex-end;
  transition: all 0.5s ease; /* 保留全属性过渡，确保所有变化都平滑 */
}

.messenger-tools .list-inline {
  margin-right: 8px;
  display: flex;
  gap: 8px; /* 用gap替代margin，更可控的间距过渡 */
}

.messenger-tools .list-inline .tool-item,
.messenger-tools .list-inline .tool-main {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center; /* 确保按钮内的图标始终居中 */
}

.messenger-tools .list-inline .tool-item [class^="fa"],
.messenger-tools .list-inline .tool-main [class^="fa"] {
  font-size: 13px;
}

.messenger-tools.medium {
  height: 40px;
  width: 40px;
  line-height: 40px; /* 用具体数值替代unset，让line-height参与过渡 */
}

.messenger-tools.medium .list-inline {
  margin-right: 0;
  gap: 0; /* 隐藏其他按钮时，间距平滑变为0 */
}

简化后的JS代码 #

$(document).on('click', '.messenger-tools .tool-main', function (e) {
  e.preventDefault();
  // 简化图标切换：fas类已存在，只需切换fa-th和fa-times
  $(this).find('i').toggleClass('fa-th fa-times');
  $(this).closest('.messenger-tools').toggleClass('medium');
});

调整后的HTML结构（无需大改，保持原有结构即可） #

<div class="bg-white shadow-sm messenger-tools medium">
  <div class="list-inline">
    <div class="list-inline-item">
      <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">
        <i class="fas fa-camera text-dark"></i>
      </button>
    </div>
    <div class="list-inline-item">
      <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-item">
        <i class="fas fa-crop-alt text-dark"></i>
      </button>
    </div>
    <div class="list-inline-item">
      <button type="button" class="btn border rounded-circle bg-light shadow-sm tool-main">
        <i class="fas fa-th text-dark"></i>
      </button>
    </div>
  </div>
</div>

如何实现顺滑的高度调整与子元素居中动画？ #

核心思路是让所有影响布局的属性都能被过渡动画处理，同时用更现代的布局方式替代老旧的定位方案：

1. 避免使用unset/auto这类无法过渡的值：所有尺寸、间距、行高都用具体数值，确保transition能计算中间状态。
2. 用Flex布局实现居中：替代line-height和绝对定位，Flex的align-items和justify-content能让子元素在容器尺寸变化时自然过渡位置，不会出现跳变。
3. 用gap替代margin控制间距：gap的变化能平滑过渡，比margin更适合动态布局的场景。
4. 移除!important声明：确保CSS优先级正常，过渡规则能覆盖所有属性变化。

这样修改后，点击工具盒时，容器的高度、宽度、行高，以及按钮的间距都会平滑过渡，完全不会出现先跳变再动画的问题，子元素的居中状态也会随着容器尺寸变化自然调整~

内容的提问来源于stack exchange，提问作者Tân