Javascript CSS3转换不'；行不通

我的转换不起作用，我不知道为什么

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>

CSS代码

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

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

这段代码运行良好，但没有转换，有人能解释一下我做错了什么吗

---

（我在Chrome和Firefox上试用过）

您需要输入一个像素值才能获得转换。无法从“0px”转换为“自动”

这里有一个

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

---

做两个班。。。1隐藏着。。。1这表明。。。然后打开和关闭隐藏的类。注意：如果希望两种方式都产生效果，请将过渡放置在两种方式中。choise=choice:）与其更改元素的样式，只需交换CSS类名并让样式表完成工作。您的HTML有问题…您是否意识到您没有正确关闭任何

。@zgr024:谢谢，我将尝试：）

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