Css动画在悬停时扩展按钮文本

Question

我想在按钮上显示更多文本,我希望按钮随着扩展文本缩小和增长.

我需要一个通用的解决方案,因为按钮上的文本因此其宽度将取决于用户对语言的选择.

这是我(目前没有工作)的尝试

.hover-value {
  display: inline-block;
  visibility: collapse;
  width: 0%;
  -webkit-transition: width 2s;
  transition: width 2s;
  overflow: hidden;
}
button:hover .hover-value {
  visibility: visible;
  width: 100%;
}

<button>
  Result
  <span class="hover-value">Add new result</span>
</button>

同样在JsFiddle:https://jsfiddle.net/JohanGovers/46392xss/

我在我的项目中使用jQuery和bootstrap但是如果可能的话想用css解决这个问题.我已尝试使用其他SO答案中建议的可见性属性,但无济于事.

任何帮助将不胜感激.

Answer 1

对于最好的动画我决定动画该max-width物业.这是因为,目前,您无法设置动画或来自动画width:auto.

(设置max-width:7rem为大于文本长度的内容.)

为了避免一堆对齐CSS我使用,display: inline-flex因为它完全对齐它没有使用vertical-align和诸如此.(如果这是一个问题,可以更改.)

然后我习惯white-space:nowrap将所有文本强制放到一行上,这样它就可以更加流畅地进行动画处理.

button span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}
button:hover span {
  max-width: 7rem;
}

<button id="btn">
  Result 
  <span>New result</span>
</button>
<button id="btn">
  Result 
  <span>Different text</span>
</button>