javascript 在悬停时扩展按钮文本的 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33888214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css animation to extend button text on hover
提问by Johan Gov
I want to show more text on a button when it's hovered and I want the button to shrink and grow with the extended text.
我想在按钮悬停时在按钮上显示更多文本，并且我希望按钮随着扩展文本而缩小和增长。
I need a general solution since the text on the button and thereby its width will depend on the users choice of language.
我需要一个通用的解决方案，因为按钮上的文本及其宽度将取决于用户选择的语言。
This is my (currently not working) attempt
这是我（目前不工作）的尝试
.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>Also on JsFiddle: https://jsfiddle.net/JohanGovers/46392xss/
同样在 JsFiddle：https://jsfiddle.net/JohanGovers/46392xss/
I'm using jQuery and bootstrap in my project but would like to solve this with css if possible. I've tried playing around with visibility property as suggested in other SO answers but to no avail.
我在我的项目中使用了 jQuery 和 bootstrap，但如果可能的话，我想用 css 来解决这个问题。我已经尝试按照其他 SO 答案中的建议使用可见性属性，但无济于事。
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by jaunt
For the nicest animation I've decided to animate the max-widthproperty. This is because, at the moment, you cannot animate to or from width:auto.
对于最好的动画，我决定为该max-width属性设置动画。这是因为，目前，您无法在width:auto.
(Set max-width:7remto something greater than the length of your text.)
（设置max-width:7rem为大于文本长度的值。）
To avoid a bunch of aligning CSS I used display: inline-flexas this perfectly aligned it without using vertical-alignand whatnot. (If this is a problem it can be changed.)
为了避免一堆对齐的 CSS，我使用了它，display: inline-flex因为它完美地对齐了它，而没有使用vertical-align等等。（如果这是一个问题，可以更改。）
Then I used white-space:nowrapto force all the text onto one line so that it animated more smoothly.
然后我曾经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>回答by Mi-Creativity
Done but with quirky animation:
完成但带有古怪的动画：
Updated- now smooth result thanks to jaunt, who suggested to add this white-space: nowrap;to the button css
更新- 由于jaunt，现在结果平滑，他建议将其添加white-space: nowrap;到按钮 css 中
button {
width: 53px;
height: 21px;
overflow: hidden;
-webkit-transition: width 1s;
transition: width 1s;
white-space: nowrap; /*this was suggested by jaunt, thanks */
}
button:hover {
width: 145px;
-webkit-transition: width 1s;
transition: width 1s;
}
button:hover::after {
content: 'Add new result';
}<h3>This is what I've got so far.</h3>
<button id="btn">
Result
</button>回答by Christoph
You can make a similar effect with the font-size.
您可以使用 font-size 产生类似的效果。
Change it from 0px to inherit or e spezific size.
将其从 0px 更改为继承或特定大小。
.hover-value {
font-size: 0px;
-webkit-transition: font-size 1s;
transition: font-size 1s;
}
button:hover .hover-value {
font-size: inherit;
}
See e Demoon jsfiddle.
请参阅jsfiddle 上的e Demo。
回答by vssadineni
I hope this will help you, I have shared the jfiddle link at the bottom for your reference, but pasting the relevant code here.
我希望这对你有帮助，我在底部分享了 jfiddle 链接供你参考，但在这里粘贴相关代码。
body{
margin:0;
padding:0;
}
h3{
margin:0;
padding:0;
line-height:1.5em;
}
button{
text-align:left;
width:7.5em;
overflow:hidden;
transition:width 1s ease-in-out;
}
button:hover{
width:20em;
transition:width 1s ease-in-out;
}
button:focus{
outline:none;
}
button span.sthGroup{
display:block;
width:20em;
overflow-x:hidden;
}
</style>
<h3>button</h3>
<button class="" type="button">
<span class="sthGroup">
<span>some text here</span>
<span>some additional text here</span>
</span>
</button>
回答by Libin C Jacob
Try this way you will get the output as you like.
试试这种方式，你会得到你喜欢的输出。
.hover-value {
display: inline-block;
/*visibility: collapse;*/
-webkit-transition: width 2s;
transition: width 2s;
overflow: hidden;
display:none;
top:3px;
position:relative;
}
button:hover .hover-value {
visibility: visible;
display: inline-block;
}<button>
Result
<span class="hover-value">Add new result</span>
</button>