[英]CSS3 transition doesn't work
my transitions doesn't work and I have no idea why. 我的转换不起作用,我也不知道为什么。
HTML code 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 code 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 code CSS代码
#PartieCPP, #PartieBAS
{
height : 0px;
overflow : hidden;
-webkit-transition: height 2s;
-moz-transition: height 2s;
transition: height 2s;
}
This code works fine, but there's no transition, can someone explain to me what I am doing wrong? 这段代码可以正常工作,但是没有过渡,有人可以向我解释我做错了什么吗?
(I tried on Chrome and Firefox) (我在Chrome和Firefox上尝试过)
You'll need to enter a pixel value to get a transition. 您需要输入一个像素值才能获得过渡。 You can't transition from '0px' to 'auto'.
您不能从“ 0px”过渡到“自动”。
Here's a link to a demo 这是演示的链接
This JavaScript seems to do the trick: 这个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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.