按钮宽度 CSS 过渡不起作用

Question

我在一个按钮标签中有一个过渡css属性的问题。

当我悬停按钮时，我以为它会平滑地移动到width:auto，但是它直接跳起来了。

这是代码，我错过了什么?

<button>Hello</button>
button {
   padding: 10px;
   width: 30px;
   overflow:hidden;
   transition: width 400ms ease-in-out;
   -webkit-transition: width 400ms ease-in-out;
   -moz-transition: width 400ms ease-in-out;
}
button:hover {
   width: auto;
}

Answer 1

max-width是你的朋友

演示

button {
   padding: 10px;
   width: auto;
   max-width: 30px;
   overflow:hidden;
   transition: max-width 400ms ease-in-out;
   -webkit-transition: max-width 400ms ease-in-out;
   -moz-transition: max-width 400ms ease-in-out;
}
button:hover {
   max-width: 100%;
}

Answer 2

转场不适合width: auto;，你必须给出一个值px, ems，百分比或其他…