current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

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;
}
share|improve this question
    
possible duplicate of jQuery duration for toggleClass issue –  isherwood Jan 15 '14 at 19:43
2  
possible duplicate of CSS transition height: 0; to height: auto; –  A. Wolff Jan 15 '14 at 19:48

3 Answers 3

up vote 3 down vote accepted

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%;
}
share|improve this answer
    
Shit, ok, thanks :) If the amount of content is variable, how can I then make the height according to the content? –  Steven Jan 15 '14 at 19:50
    
you could set the height to 100% –  kasper Taeymans Jan 15 '14 at 19:53
    
I tried, but it filled the entire div. But, if I set a max.height, using 100% works perfectly :) Fiddle: jsfiddle.net/mBKXn/8 –  Steven Jan 15 '14 at 19:55
up vote 4 down vote

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.

share|improve this answer
3  
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. –  Pointy Jan 15 '14 at 19:50
1  
max-height: 100%; should be enough ;) jsfiddle.net/mBKXn/6 But Pointy makes a good point –  A. Wolff Jan 15 '14 at 19:50
    
@A.Wolff yes but that's 100% of the parent element height, so you still get the pause when toggling back to 0. –  Pointy Jan 15 '14 at 19:52
    
@Pointy ya, that's correct and can be an issue. Do you know how to solve it? –  A. Wolff Jan 15 '14 at 19:53
    
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. –  dfsq Jan 15 '14 at 19:58
up vote 2 down vote

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;
}
share|improve this answer
    
This is also true. –  isherwood Jan 15 '14 at 19:44
1  
He's doing a css transition from height 200px to height auto (auto is the cause) –  Kevin B Jan 15 '14 at 19:49
    
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. –  Steven Jan 15 '14 at 19:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.