转换不适用于100％宽度

Question

过渡不起作用，也许有人可以提供帮助？ 我希望宽度和文本一样长，没有固定宽度，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;}

Answer 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属性。

我希望这会有所帮助。