Question

我有一个代码（简化）。我想要“高度线性2s”过渡。有没有办法使用display：block和display：none属性？我不想指定内容的高度。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
const classes = new Array("shown", "hidden");
const classesCount = 2;
var curClass = 0;
function switchClass() {
    document.getElementById("divel").className=classes[curClass = (curClass + 1) % classesCount];
}
</script>
<style type="text/css">
    .hidden {
        display:none;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
    }
    .shown {
        display:block;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
    }
</style>
</head>
<body>
    <button onclick="switchClass()">Press me</button>
    <div id="divel" class="shown">
        Hello World<br>
        Hello World<br>
        Hello World<br> 
    </div>

</body>
</html>