CSS过渡自动高度无法正常工作

CSS过渡自动高度无法正常工作

如果您只想使用CSS，则一种解决方案是过渡

max-height

而不是

height

将其设置为比以往任何时候都更大的值…

您将需要稍稍缩短转换的速度，但是至少该示例使您对如何完成转换有所了解。别忘了在过渡中更改属性。从

transition: height0.5s;

到

transition: max-height 0.5s;

。

希望这可以帮助！

.ac-container{    width: 400px;    margin: 10px auto 30px auto;    text-align: left;}.ac-container label{    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;    padding: 5px 20px;    position: relative;    z-index: 20;    display: block;    height: 30px;    cursor: pointer;    color: #777;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);    line-height: 33px;    font-size: 19px;    background: #ffffff;    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );    box-shadow:        0px 0px 0px 1px rgba(155,155,155,0.3),        1px 0px 0px 0px rgba(255,255,255,0.9) inset,        0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{    background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{    background: #c6e1ec;    color: #3d7489;    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);    box-shadow:        0px 0px 0px 1px rgba(155,155,155,0.3),        0px 2px 2px rgba(0,0,0,0.1);}.ac-container input{    display: none;}.ac-container section{    background: rgba(255, 255, 255, 0.5);    margin-top: -1px;    overflow: hidden;    max-height: 0px;    position: relative;    z-index: 10;    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{    font-style: italic;    color: #777;    line-height: 23px;    font-size: 14px;    padding: 20px;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{    max-height: 500px; }<div >    <div>        <input id="ac-1" name="accordion-1" type="checkbox" />        <section > <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>        </section>        <label for="ac-1">about us</label>    </div><div>        <input id="ac-2" name="accordion-2" type="checkbox" />        <section > <p>Some content... </p>        </section>        <label for="ac-2">about us</label></div></div>