求助：实现无预设宽度的按钮悬停平滑扩宽并显示文本效果

我来帮你搞定这个按钮动画的需求！你的核心目标是让按钮初始只显示图标，鼠标悬停时平滑扩展到容纳后端动态渲染的文本，同时逐步显示文本内容，对吧？咱们先看看原代码的问题，再给出调整方案：

原代码的问题分析 #

• 按钮没有设置初始固定宽度，导致宽度过渡没有基准值，动画会显得突兀
• .btn-text 使用 width: auto 无法实现平滑过渡，CSS不支持auto值的过渡动画
• 文本颜色过渡的时机设置不合理，2秒的延迟太长，和宽度扩展的节奏不匹配

调整后的解决方案 #

我们可以通过以下几个关键调整实现你要的效果：

• 给按钮设置初始固定宽度，刚好容纳图标和内边距
• 用max-width控制文本的显示过渡（替代width: auto），初始设为0，悬停时设为足够大的值容纳动态文本
• 调整过渡属性和延迟，让宽度扩展和文本显示的节奏更协调
• 用Flex布局优化图标和文本的对齐方式

完整代码 #

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sti_container">
<button class="btn">
<span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
<span class="btn-text">Shop the image here to click and open</span>
</button>
</div>

.sti_container{ 
  position: relative; 
}
.btn{ 
  position: relative; 
  display: inline-flex;
  align-items: center;
  padding: 15px; 
  background-color: blue; 
  cursor: pointer; 
  outline: none; 
  border: 0; 
  color: #fff; 
  border-radius: 25px; 
  transition: width 0.5s ease;
  width: 50px; /* 初始宽度，刚好容纳图标+左右内边距 */
  justify-content: center; /* 初始状态图标居中 */
}
.btn .btn-icon{
  width: 20px; /* 固定图标宽度，避免悬停时位置跳动 */
  text-align: center;
}
.btn .btn-text{ 
  max-width: 0; /* 初始隐藏文本 */
  display: inline-block; 
  transition: max-width 0.5s ease, color 0.3s ease, margin-left 0.5s ease;
  white-space: nowrap; 
  overflow: hidden; 
  color: transparent; /* 初始文本透明，避免漏出 */
  margin-left: 0;
  transition-delay: 0s, 0.3s, 0s; /* 颜色延迟显示，让宽度先扩展 */
}
.btn:hover{
  width: fit-content; /* 悬停时宽度自适应文本 */
  justify-content: flex-start; /* 图标左对齐，文本跟上 */
  padding-right: 15px; /* 保持右侧内边距 */
}
.btn:hover .btn-text{ 
  max-width: 500px; /* 足够大的值，适配后端动态文本 */
  color: white; 
  margin-left: 10px; /* 图标和文本之间添加间距 */
}

效果说明 #

1. 初始状态：按钮是圆形（宽度50px+border-radius25px），仅显示居中的购物袋图标
2. 悬停过程：按钮宽度平滑扩展到文本的总长度，同时文本的max-width从0逐渐放开，颜色在宽度扩展到一定程度后从透明变为白色，图标和文本之间的间距也同步展开
3. 适配动态文本：不需要预设文本宽度，max-width: 500px可以覆盖大部分后端返回的文本长度，你也可以根据实际需求调整这个值

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