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

Posted 2023-03-06

【中文标题】Css过渡高度使用javascript不起作用[重复]

【英文标题】：Css transition height does not work using javascript [duplicate]

【发布时间】：2014-11-07 22:21:47

【问题描述】：

所以这是我想使用 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;         
        
    

【问题讨论】：

我认为转换不适用于auto。尝试 % 或 px 值。

这个问题的经典解决方案是在max-height上转换。

另见***.com/questions/3508605/…。

【参考方案1】：

来自MDN：

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