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

原文地址：https://www.jb51.cc/css/427653.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。