css height为auto的transition过渡设置

需求是有一些动态内容折叠起来的，点击后弹开

js定时器的动画过渡暂不考虑，于是就想到transition过渡

一开始就想着用trasition动画过渡就搞定啦，试了一下后，发现有问题

折叠的元素的高度height必须得设置一个值才可以有过渡的效果，要不就过渡不了

折中一下，就用js动态获取子元素的高度，然后给值到折叠的元素上实现过渡了

不过需要注意的是，内容的元素，虽然平常是不显示，但是还是暂据文本流的空间，所以缩起来后，要设置{visibility:hidden}.

打开时再设置{visibility:visible}

<li>

    <h4 class="title"></h4>

    <div class="container">

        <div class="details_content"></div>

    </div>

</li>

<style>

.faq_sub_content li .container{ width:100%; transition:all 0.3s cubic-bezier(0.4, 0, 1, 1); -webkit-transition:all 0.3s cubic-bezier(0.4, 0, 1, 1); -webkit-opacity:0; opacity:0; height:0; overflow: hidden;}

.faq_sub_content li .details_content{ background-color:#fff; color:#818181; font-size:14px; line-height:25px; padding:10px 26px; overflow: hidden; width:100%;}

</style>