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的动画可能会导致不可预测的结果，具体取决于浏览器及其版本，应该避免使用。

使用javascript，Css过渡高度不起作用

1 个答案: