使用javascript函数在div上应用CSS过渡属性

Question

I have used javascript code to increase and decrease the height of div on click event. But i also want to apply transition-duration property so that transition goes smoothly.

Here is the css code

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    transition-duration:2s;
}

#content.expand {
    height: 300px;
    transition-duration:2s;
}

This is the javascript code

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

The function is working properly. I have applied transition property, but that is not working.

Answer 1

According to Bugzilla, this is the Bug 571344 .

Transition to and from auto affects Firefox (that doesn't transition at all ), but works in quirks ways in other browsers too.

For example, in Chrome height: auto is treated like height: 0 in the transition, and you will see the red background of the example being smaller up to disappear, then restoring to the real "auto" value.

Simply specify an height, and it will work good, in every browser: Running demo

Answer 2

Try cross browser solution like this:

 transition-duration:2s; 
 -o-transition-duration:2s; 
 -moz-transition-duration:2s; 
 -webkit-transition-duration:2s;

instead of only transition-duration:2s;

Answer 3

It is a problem with the value transform, in Mozilla it is prefixed with -moz-transform.

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease;
}

#content.expand {
    height: 300px;
   -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease; 
}