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> 

자바 스크립트 코드

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'로 전환 할 수 없습니다. ... 다음에 숨 깁니다 클래스를 전환

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