Apply CSS transition property on div with javascript function

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.

Works fine here: jsfiddle.net/oGeez/Lw76f - What's the problem? — George
– George, Commented Dec 3, 2013 at 9:33
if you are trying on safari you need to wirte -webkit-transition-duration :2s; — Indranil.Bharambe
– Indranil.Bharambe, Commented Dec 3, 2013 at 9:33
@Terror.Blade Transition is not working in mozilla. Works fine in chrome and safari. — Sahibjot Singh
– Sahibjot Singh, Commented Dec 3, 2013 at 9:42

Andrea Ligios · Accepted Answer · 2013-12-03 10:23:31Z

2

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

answered Dec 3, 2013 at 10:23

Andrea Ligios

50.4k29 gold badges127 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igl3 · Accepted Answer · 2013-12-03 09:46:12Z

0

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;

edited Dec 3, 2013 at 9:46

answered Dec 3, 2013 at 9:34

Igl3

5,1085 gold badges39 silver badges69 bronze badges

1 Comment

Sahibjot Singh Over a year ago

Its still not working in mozilla. It increases and decreases in a sudden. No effect of transition property.

Indranil.Bharambe · Accepted Answer · 2013-12-03 10:01:59Z

0

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

edited Dec 3, 2013 at 10:01

answered Dec 3, 2013 at 9:48

Indranil.Bharambe

1,4983 gold badges14 silver badges26 bronze badges

3 Comments

Sahibjot Singh Over a year ago

where should i put the time duration? can you please show me?

Sahibjot Singh Over a year ago

checked it. still not working. Its working in chrome, but not in mozilla.

Sahibjot Singh Over a year ago

Your efforts are great @Terror.Blade, but that is not working. Can you please check this in your mozilla browser. It may be due to some problem in browser.

Collectives™ on Stack Overflow

Apply CSS transition property on div with javascript function

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related