CSS3 transition with jQuery .addClass and .removeClass

Question

I have a big main navigation panel that I want to animate when it\'s deploying (expanding).

I\'m working with jQuery to trigger the visibility of it by adding/removing t

Answer 1

You are adding and removing the class that contains the transition CSS. I recommend moving that to its own rule DEMO.

.hidden{
    max-height: 0px;
}
.visible{
    max-height: 500px;  
}

#repair-drop{
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}