Question

I have a DIV class setup as follows:

div.map_view{
height: 420px;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}

The purpose is when I change the height of this DIV, it animates a scroll (up in this case). When I call this function in my script:
document.getElementById('map_view').style.height = '0px';, it just immediately disappears (doesn’t animate). However, if I comment this out and call the exact same line in my JS debugger, the animation works.

Why is this? What am I missing that causes it to do nothing in my script?

Answer 1

I actually found a helpful tutorial here: CSS3 Transitions in JavaScript. I basically setup my two CSS3 class definitions and use jQuery’s .toggleClass() function to change between the two.