javascript – 用于在悬停时扩展按钮文本的Css动画

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

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

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

.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%;
}

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

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

任何帮助将不胜感激.

最佳答案

对于最好的动画,我决定为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;
}