-WEBKIT-TRANSITION表示スタイル

コードがあります（簡体字）。私は "高さの直線2秒"の移行をしたい。 display：blockとdisplay：noneプロパティを使用してそれを行う方法はありますか？私はコンテンツの高さを指定したくありません。-WEBKIT-TRANSITION表示スタイル

<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>

出典

2011-04-26 Igor