-WEBKIT-TRANSITION顯示樣式

我有一個代碼（簡化）。我想要「高度線性2s」轉換。有沒有辦法做到這一點使用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