Css过渡高度使用javascript不起作用[重复]

Question

所以这是我想使用 javascript 为我的网站制作下拉列表但高度转换不起作用的问题，当我单击 div 上的它显示了一种方法，但问题是它没有过渡，所以它不平滑，它只是弹出。请帮助并提前感谢您的队友。

代码如下：

HTML

<h1 id="btnh" onClick="show_about('aboutcr')">about</h1>

<div id="aboutcr">
    <div id="pcontcr">
        <p id="p2r">"Hey guys my name is <span>Vincent Nocum</span> and welcome to my project     website. I'm a 17yrs old student taking up <span>Information Technology Course in Lyceum of The Philippines Laguna</span>, The purpose of this website is for my project in <span>Communication Arts II</span> lead by our professor <span>Ms.Lenie De Leon</span>. I post some topic on this website held by our professor. So its concluded that this website is only for educational purposes only"</p>
    </div>
</div>

这是css

    #aboutcr{
        display: inline-block;
        background:white;
        width: 100%;
        text-align: justify;
        overflow: hidden;
        height: 0px;
        transition: height .5s;
        -webkit-transition: height .5s;
        -moz-transition: height .5s;
        -ms-transition: height .5s;
        -o-transition: height .5s;
    }

    #btnh {
        width: 100%;
        margin: 0 auto;
        text-align:center;
        font-family: latolight;
        /*text-transform: capitalize;*/
        font-size: 25px;
        padding-top: 2%;
        padding-bottom: 2%;
        color: #9bcf40;
        border-bottom: 1px solid;
        border-color: #9bcf40;
        margin-top: -4px;
        background: -webkit-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -moz-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -ms-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -o-linear-gradient(#f4f4f4, #f1f1f1 );
        background: linear-gradient(#f4f4f4, #f1f1f1 );
    }

这里是javascript：

        function show_about(x){
        var about = document.getElementById(x), h = "auto";
        // or 
        // var menu = this.children[0];  

        if(about.style.height == h){
            about.style.height = "0px";
        }else{
            about.style.height = h;         
        }
    }

Answer 1

来自MDN：

此外，auto 值通常是一个非常复杂的情况。规范要求不要从和到这样的值进行动画处理。一些用户代理，如基于 Gecko 的用户代理，实现了这一要求，而其他用户代理，如基于 WebKit 的用户代理，则不那么严格。使用带有auto 的动画可能会导致不可预知的结果，具体取决于浏览器及其版本，应避免使用。