如何在悬停按钮时缓慢显示文本

Question

你能告诉我如何在悬停按钮时缓慢显示文本吗？我尝试使用transition:all 5s;，但我遇到了一个问题我的文本从下到右。我知道文本没有得到合适的宽度，因为它是从下到下的，当宽度可用时，它就会向右显示。

只有当宽度可用时才可以显示吗？以便用户不会看到从下到右的文本。

这是我的代码https://jsbin.com/nividexoti/edit?html，css，输出

button {
width: 30px;
height: 30px;
}
button span {
display: none;
}
button:hover {
width: 80px;
transition: all 5s;
}
button:hover span {
display: inline;
}

<div>
<button>
<i>||</i>
<span>pause<span>
</button>
</div>

Answer 1

您可以将opacity:0添加到button的span元素，并在hover上使用transition应用opacity:1。参考：https://jsbin.com/nozomakuru/1/edit?html，css，输出

Answer 2

您可以使用flexbox并在按钮上设置overflow: hidden：

button {
/* Added */
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
/* ----- */

width: 30px;
height: 30px;
}
button:hover {
width: 80px;
transition: all 5s;
}

<div>
<button>
<i>||</i>
<span>pause</span>
</button>
</div>

Answer 3

您可以设置一个动画延迟，只有当它足够厚并使用不透明度播放时才会出现：

button {
width: 30px;
height: 30px;
transition: all 5s;
}
button span {
display: none;
}
button:hover {
width: 80px;
}
button:hover span {
display: inline;
opacity: 0;
animation-name: appear;
animation-duration: 100ms;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes appear {
from {
opacity: 0;
position: absolute;
}
to {
opacity: 1;
position: static;
}
}

<button>
<i>||</i>
<span>pause</span>
</button>