按钮宽度 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

Transition 不适用于 width: auto; 您必须以像素、em、百分比或其他任何形式给出值...

Answer 2

最大宽度是你的朋友

Demo

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%;
}

按钮宽度 css 过渡不起作用

button width css transition doesn't work

css

button

css-transitions