CSS3轉換不起作用

Question

我的轉換不起作用，我不知道爲什麼。

HTML代碼

<!-- The user can select here the language --> 
<select name="language" id="language" onChange="ChangeLanguage()"> 
    <option value=" " selected/> 
    <option value="Basic"/>Basic 
    <option value="C/C++" />C/C++ 
</select> 

<div id="PartieCPP"> <!-- This <div> disappear when the user choose "Basic" --> 
    ... 
</div> 

<div id="PartieBAS"> <!-- This <div> disappear when the user choose "C/C++" --> 
    ... 
</div> 

JavaScript代碼

function ChangeLanguage() //this function is called when the user change the selected language 
{ 
    var choise = document.getElementById("language").options[document.getElementById("language").selectedIndex].value; 

    if (choise == "C/C++") 
    { 
     document.getElementById("PartieCPP").style.height = "auto"; //"PartieCPP" appear 
     document.getElementById("PartieBAS").style.height = "0px"; //"PartieBAS" disappear 
    } 
    else if (choise == "Basic") 
    { 
     document.getElementById("PartieCPP").style.height = "0px"; //"PartieCPP" disappear 
     document.getElementById("PartieBAS").style.height = "auto"; //"PartieBAS" appear 
    } 
    else 
    { 
     document.getElementById("PartieBAS").style.height = "0px"; //"PartieBAS" disappear 
     document.getElementById("PartieCPP").style.height = "0px"; //"PartieCPP" disappear 
    } 
} 

CSS代碼

#PartieCPP, #PartieBAS 
{ 
    height : 0px; 
    overflow : hidden; 

    -webkit-transition: height 2s; 
    -moz-transition: height 2s; 
    transition: height 2s; 
} 

此代碼工作正常，但沒有過渡，可有人向我解釋我在做什麼錯誤？

（我在Chrome和Firefox上試過）

Answer 1

您需要輸入一個像素值才能進行轉換。你不能從'0px'轉換到'auto'。

這裏有一個link to a demo

這個JavaScript似乎這樣的伎倆：

function ChangeLanguage() //this function is called when the user change the selected language 
{ 
    var choise = document.getElementById("language").options[document.getElementById("language").selectedIndex].value; 

    if (choise == "C/C++") 
    { 
     document.getElementById("PartieCPP").style.height = "50px"; //"PartieCPP" appear 
     document.getElementById("PartieBAS").style.height = "0px"; //"PartieBAS" disappear 
    } 
    else if (choise == "Basic") 
    { 
     document.getElementById("PartieCPP").style.height = "0px"; //"PartieCPP" disappear 
     document.getElementById("PartieBAS").style.height = "50px"; //"PartieBAS" appear 
    } 
    else 
    { 
     document.getElementById("PartieBAS").style.height = "0px"; //"PartieBAS" disappear 
     document.getElementById("PartieCPP").style.height = "0px"; //"PartieCPP" disappear 
    } 
}