我想我明白了。
.wrapper {
background:#DDD;
display:inline-block;
padding: 10px;
height: 20px;
width:auto;
}
.label {
display: inline-block;
width: 1em;
}
.contents, .contents .inner {
display:inline-block;
}
.contents {
white-space:Nowrap;
margin-left: -1em;
padding-left: 1em;
}
.contents .inner {
background:#c3c;
width:0%;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.wrapper:hover .contents .inner {
width:100%;
}
<div class="wrapper">
<span class="label">+</span><div class="contents">
<div class="inner">
These are the contents of this div
</div>
</div>
</div>
动画化为100%
会包装,因为该框大于可用宽度(100%减去+
以及其后的空白)。
相反,您可以为内部元素设置动画,该元素100%
的总宽度为.contents
。