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

小编典典

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

css

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

问题： 请参见JSfiddle

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

当悬停于时.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>

阅读 1022

2020-05-16

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

2020-05-16