CSS - 平滑扩展按钮宽度并在悬停时显示文本

Question

我试图在鼠标悬停时制作一个按钮动画，初始状态下该按钮将仅显示一个图标，悬停后将扩展其宽度，然后显示其中的文本。

我无法添加预定义的最大宽度、宽度或宽度值，因为我不知道文本的长度，因为它是从后端服务呈现的。

我已经添加了一些CSS代码，但它不能正常工作。 我需要的流程如下 -

1. 初始状态下显示带图标的按钮
2. 悬停后，按钮的宽度将扩展到文本的长度
3. 然后显示按钮内的文本

.sti_container{
  position: relative;
}

.btn{
  position: relative;
  display: inline-block;
  padding: 15px;
  background-color: blue;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.btn .btn-text{
  width: 0;
  display: inline-block;
  -webkit-transition: color 2s;
  transition: color 2s;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  color: blue;
}
.btn:hover .btn-text{
  width: auto;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sti_container">
  <button class="btn">
    <span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
    <span class="btn-text">Shop the image here to click and open</span>
  </button>
</div>

- Daniel Smith

Answer 1

宽度 auto 值不能被动画化，因此请使用 max-width ：

.sti_container {
  position: relative;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 15px;
  background-color: blue;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}

.btn .btn-text {
  max-width: 0;
  display: inline-block;
  -webkit-transition: color .25s 1.5s, max-width 2s;
  transition: color .25s 1.5s, max-width 2s;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  color: blue;
}

.btn:hover .btn-text {
  max-width: 300px;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sti_container">
  <button class="btn">
    <span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
    <span class="btn-text">Shop the image here to click and open</span>
  </button>
</div>

另一个问题是你只能动画颜色，因此需要将过渡属性更改为transition: color 2s, max-width 2s;。

- Mr T

---

我无法添加预定义的最大宽度或宽度值，因为我不知道文本的长度，因为它是从后端服务呈现的。 - Daniel Smith

如果您愿意，可以添加 max-width: 99999px，这样您就不会有超过该长度的文本 :) - Mr T

此外，仍然存在您的动画无法正常工作的问题。第一个按钮将展开但不显示文本，在展开后文本将显示。 - Daniel Smith

不确定我是否理解您的意思。如果我没错的话，您想要延迟颜色过渡 transition: color 2s 2s, max-width 2s;。 - Mr T

是的，我想要延迟文本的颜色。 - Daniel Smith

更新了答案以包含延迟。 - Mr T