CSS3 transition doesn't work

Question

my transitions doesn't work and I have no idea why.

HTML code

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

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

#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)

make 2 classes... 1 that hides... 1 that shows... then toggle the class that hides on and off. NOTE: Place the transition in both if you want the effect both ways. choise = choice :) — zgr024, Jul 11 '14 at 18:52
Instead of changing styles on the element, just swap CSS class names and let the stylesheet do the work. — Diodeus - James MacFarlane, Jul 11 '14 at 18:52
Are you aware of the fact that you're not closing any of the ` — T J, Jul 11 '14 at 19:00
@TilwinJoy : I didn't know that I should close it with `` instead of `Test`, thanks :) — Pascal Goldbach, Jul 11 '14 at 19:19
possible duplicate of [CSS transition height: 0; to height: auto;](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) — T J, Jul 11 '14 at 20:21
@TilwinJoy : Thank you for the link, I tried to use max-height and now it works great ! Thank you :) — Pascal Goldbach, Jul 11 '14 at 22:57

score 1 · Accepted Answer · answered Jul 11 '14 at 19:02

You'll need to enter a pixel value to get a transition. You can't transition from '0px' to 'auto'.

Here's a link to a demo

This JavaScript seems to do the trick:

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

CSS3 transition doesn't work

1 Answers1