Svelte组件：如何实现容器随标题显示平滑放大？

直接用max-width配合CSS过渡就能解决标题长短不一导致的间隙问题，同时实现平滑展开效果，不用固定死宽度：

修改后的Svelte组件代码 #

<div class="flex flex-row items-center gap-2 bg-black bg-opacity-70 backdrop-blur-sm p-3 rounded-2xl icon_container">
    <div>
        {@html icon}
    </div>
    <p class="title-text">{title}</p>
</div>

对应的CSS样式 #

.icon_container {
  /* 保留你原来的flex等布局样式 */
  transition: max-width 0.3s ease;
  max-width: 56px; /* 初始只显示图标的宽度 */
  overflow: hidden; /* 隐藏超出的标题内容 */
}

.icon_container:hover {
  max-width: 300px; /* 设置一个足够容纳最长标题的上限，也可以用max-content（兼容性稍差） */
}

.title-text {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateX(-10px); /* 标题初始向左偏移，增强动画感 */
  white-space: nowrap; /* 防止标题换行 */
}

.icon_container:hover .title-text {
  opacity: 1;
  transform: translateX(0);
}

方案优势 #

1. 不用写JS的toggleVisibility逻辑，完全靠CSS过渡实现，性能更流畅
2. 容器宽度会自适应标题长度，不会出现短标题留间隙、长标题放不下的问题
3. 容器展开和标题淡入的动画同步，视觉效果更自然

如果还是想用Svelte的fly过渡，可以把标题的CSS动画换成Svelte的过渡，但要注意在mouseenter时先让容器开始过渡，再显示标题，不过纯CSS方案已经足够简洁好用。

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