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

Css animation to extend button text on hover

本文关键字：Css 动画 文本 按钮 扩展 悬停      更新时间：2023-09-26

当按钮悬停时，我想在按钮上显示更多文本，并且我希望按钮随着扩展文本而收缩和增长。

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

这是我（目前不工作）尝试

.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答案中所建议的那样，我尝试过使用可见性属性，但没有成功。

如有任何帮助，我们将不胜感激。

为了获得最好的动画效果，我决定为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>

完成，但有古怪的动画：

更新 -由于jaunt，现在结果很顺利，他建议将此white-space: nowrap;添加到按钮css

JS Fiddle

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>

尝试这种方式，您可以随心所欲地获得输出。

.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>

您可以使用字体大小产生类似的效果。

将其从0px更改为inherit或e特定大小。

.hover-value {
    font-size: 0px;
    -webkit-transition: font-size 1s;
    transition: font-size 1s;
}
button:hover .hover-value {
    font-size: inherit;
}

请参阅jsfiddle上的e演示。

我希望这会对你有所帮助，我在底部分享了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>

供参考的样本

基于CSS的解决方案

.bookNow {
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  transition: 0.4s;
  height: 35px;
  padding: 0 5px;
  border-radius: 35px;
  cursor: pointer;
  border: 1px solid;
}
h1 {
  font-size: 14px;
  margin-left: 10px;
}
header {
  display: none;
  white-space: nowrap;
  padding-left: 15px;
}
.bookNow:hover {
  width: 200px;
  transition: 0.4s;
  border-radius: 35px;
}
.bookNow:hover header {
  display: block;
}
<div class="bookNow" title='Book Now'>
  <h1>X</h1>
  <header>Book An Appointment</header>
</div>

相关文章：