Why is css transition not working when adding class using javascript / jQuery?

Question

I have a message box which I want to slide down on click. I do this by adding a css class through Angular (and jQuery in my example). But my CSS transition does not take effect.

Is there any obvious mistake I'm doing?

Here's my fiddle: http://jsfiddle.net/mBKXn/

and my code:

// jQuery
$('.test').on('click',function(){
  $('#msgContainer').toggleClass('msgShow');
});

// HTML
<div class="container">
    <div id="msgContainer" class="msg">
        <p>Message here</p>
        <p>T2</p>
        <p>T4</p>
    </div>
    Test text
</div>

<button class="test">Click</button>

// CSS
.container{
    position: relative;
    height: 200px;
    width: 400px;
    border: solid 1px #222;
}

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.8s linear;
    -moz-transition: height 0.8s linear;
    -o-transition: height 0.8s linear;
    -ms-transition: height 0.8s linear;
    transition: height 0.8s linear;    
}

.msgShow{
    height: auto;
}

possible duplicate of CSS transition height: 0; to height: auto; — A. Wolff
– A. Wolff, Commented Jan 15, 2014 at 19:48

kasper Taeymans · Accepted Answer · 2014-01-15 19:50:52Z

6

you need to set a defined height. Height:auto won't work as this is the default height value.

see the specs for the height property here: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

http://jsfiddle.net/mBKXn/7/

.msgShow{
    height: 100%;
}

edited Jan 15, 2014 at 19:50

answered Jan 15, 2014 at 19:45

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

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

2 Comments

kasper Taeymans Over a year ago

you could set the height to 100%

Steven Over a year ago

I tried, but it filled the entire div. But, if I set a max.height, using 100% works perfectly :) Fiddle: jsfiddle.net/mBKXn/8

Community · Accepted Answer · 2017-05-23 10:28:59Z

6

To animate height from 0 to auto you have to use max-height instead:

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: max-height 0.8s linear;
    -moz-transition: max-height 0.8s linear;
    -o-transition: max-height 0.8s linear;
    -ms-transition: max-height 0.8s linear;
    transition: max-height 0.8s linear;    
}

.msgShow{
    max-height: 1000px;
}

Seems to work: http://jsfiddle.net/mBKXn/3/

Also take a look at this question.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 15, 2014 at 19:47

dfsq

193k26 gold badges244 silver badges261 bronze badges

12 Comments

Pointy Over a year ago

This does work, but it's problematic because once the max-height value exceeds the height, there are no further visual changes even though the browser continues "animating". When you click again, there's a noticeable pause while the value animates down to the actual height.

A. Wolff Over a year ago

max-height: 100%; should be enough ;) jsfiddle.net/mBKXn/6 But Pointy makes a good point

Pointy Over a year ago

@A.Wolff yes but that's 100% of the parent element height, so you still get the pause when toggling back to 0.

A. Wolff Over a year ago

@Pointy ya, that's correct and can be an issue. Do you know how to solve it?

dfsq Over a year ago

Yes, it's true. So when using this method, one should set reasonable max-height (not 1000px like in my example) to reduce animation delay on back toggle.

|

erikrunia · Accepted Answer · 2014-01-15 21:57:27Z

3

Another (older IE compliant) way to do this is through slideToggle.

Updated Fiddle that works and another Fiddle where I removed some of your transition css and it makes the animation smoother in my opinion.

your code needs a slight change:

$('.test').on('click',function(){
  $('#msgContainer').slideToggle('slow');
});

and your class needs a slight change:

.msg{
    display:none;
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: auto;
    width: 100%;
    overflow: hidden;
}

edited Jan 15, 2014 at 21:57

answered Jan 15, 2014 at 19:43

erikrunia

2,4731 gold badge18 silver badges28 bronze badges

2 Comments

user400654 Over a year ago

He's doing a css transition from height 200px to height auto (auto is the cause)

Steven Over a year ago

Wrong. I'm using CSS transition which is the animation. As both Kevin and Kasper points out, css transition does not work with auto height.

Collectives™ on Stack Overflow

Why is css transition not working when adding class using javascript / jQuery?

3 Answers 3

2 Comments

12 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related