在CSS3或jQuery中，对元素的宽度进行动画处理（从0到100％），并且它的包装器仅根据需要的宽度而没有预设的宽度

Question

悬停时.wrapper，其子元素.contents应从0px变为其自然宽度。然后，将鼠标从中移出时.wrapper，它应重新动画到0px。该.wrapper元件应仅一样宽，它需要被（允许.contents生长），所以.wrapper应在宽度成长和收缩宽度为.contents一样。不应设置的宽度.contents。我正在使用CSS3，但是可以在jQuery中完成，那很好。

问题： 请参见JSfiddle

1. .wrapper 不仅需要它的宽度。
2. 当.contents增长时，几乎达到全宽时，它会跳到下一行

3. 当悬停于时.wrapper，.contents消失，应该将其动画化为0px

   .wrapper {

   display: inline-block;
   
   height: 20px;
   
   width: auto;
   
   padding:10px;
   
   background:#DDD;
   

   }

   .contents {

   display:inline-block;
   
   width:0%;
   
   white-space:nowrap;
   
   overflow:hidden;
   
   background:#c3c;
   

   }

   .wrapper:hover .contents {

   -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;
   
   width:100%;
   

   }

   <span>+</span>
   
   <div class="contents">These are the contents of this div</div>
   

Answer 1

我想我明白了。

.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。