如何实现鼠标悬停按钮时文字缓慢显示，避免文字从底部跳至右侧

问题原因 #

核心问题由两个错误实现导致：

• display 属性不支持CSS过渡，hover瞬间文字就会显示，此时按钮宽度还在过渡过程中不足以放下文字，文字被迫换行，等宽度足够后才跳到同一行
• 过渡仅设置在hover状态，鼠标移出时没有平滑缩回的效果

修正方案代码 #

CSS代码 #

button {
  width: 30px;
  height: 30px;
  overflow: hidden; /* 隐藏超出按钮区域的内容 */
  white-space: nowrap; /* 强制文字不换行 */
  transition: all 5s ease; /* 过渡加在默认状态，移入移出都有动画 */
  border: none;
  cursor: pointer;
}

button span {
  opacity: 0; /* 初始透明 */
  visibility: hidden; /* 初始不可交互 */
  transition: all 5s ease 2s; /* 延迟2s显示，等按钮宽度展开足够再出现 */
  margin-left: 4px;
}

button:hover {
  width: 80px;
}

button:hover span {
  opacity: 1;
  visibility: visible;
}

如果需要更快的常规交互效果，把所有5s改为0.3s、延迟的2s改为0.2s即可。

HTML代码 #

<div>
  <button>
    <i>||</i>
    <span>pause</span> <!-- 修正原代码的span闭合错误 -->
  </button>
</div>

核心优化点 #

• 用opacity+visibility替代display控制文字显隐，这两个属性支持平滑过渡，不会出现瞬间切换的突兀感
• 给文字的过渡设置延迟，等按钮宽度展开到足够放下文字的状态后再显示文字，完全避免换行跳动的问题
• 过渡属性加在元素默认状态，鼠标移入、移出都可以触发平滑动画，交互更流畅
• white-space: nowrap强制文字不换行，就算出现特殊情况也不会出现多行排版

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