过渡不适用于 100% 宽度答案

【问题标题】：transition does not work with 100% width过渡不适用于 100% 宽度
【发布时间】：2015-02-02 15:49:37
【问题描述】：

过渡不起作用，也许有人可以帮忙？我希望宽度与文本一样长且没有固定宽度，100% 宽度不起作用，错误在哪里？！我将其宽度设置为自动但没有过渡... http://jsfiddle.net/6Lso4jt1/

<a href="#" class="hotspot"><span class="hotspot-info">bsf ksv nvd</span></a>

.hotspot {
display: block;
width: 40px;
height: 40px;
background: #c23538;}

.hotspot:hover .hotspot-info {
width: auto;
white-space: nowrap;
display: block;
height: 40px;
padding: 0 10px;}

.hotspot-info {
position: absolute;
transition:width 100ms ease-in-out;
width: 0;
background-color: #c23538;
height: 40px;
color: white;
line-height: 40px;
overflow: hidden;}

【问题讨论】：

显然转换到/从宽度：自动is not available。也许 jQuery 会是你的答案。

标签： css width transition

【解决方案1】：

你可以使用transition-property来指定css属性。

transition-property: width;
-webkit-transition-property: width;
transition: 100ms ease-in-out;

演示：http://jsfiddle.net/6Lso4jt1/2/

另一种方式： 使用transition: all 100ms ease-in-out;，你不需要指定css属性。

我希望这会有所帮助。

【讨论】：