2

I have a div that get's filled with text. That text changes when different buttons get clicked and the div grows and shrinks to accommodate the text (as divs normally do when you use CSS). It has a background and a border and I wanted to use CSS3 transitions to have the div grow and shrink smoothly with a little animation. For some reason my code isn't working. I wrote: 

div.div-in-question {
    margin: 0 auto;
    position: relative;
    padding: 0 50px;
    width: 600px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

It still just grows and shrinks like normal with no animation or smoothness.

I've made a JSFiddle that I thought would work based on how I thought CSS3 transitions worked.

Johnston
  • 20,196
  • 18
  • 72
  • 121
  • 3
    You can not transition an auto height – you would have to set a specific height for a transition to work. – CBroe Mar 06 '15 at 04:57
  • Have a look at this answer and see if that helps: http://stackoverflow.com/questions/13938460/css-transition-auto-height-not-working/13938698#13938698 – Christofer Vilander Mar 09 '15 at 09:03

3 Answers3

1

Try something like this with jQuery

JSIFFLDE

$("body").click(function(e){
    e.preventDefault();
    $("ul").append("<li>Another row</li>");
    $("ul li").slideDown();
});

EDIT

I've added easing "easeOutBounce" soo it looks like falling down from upper element

JSFIDDLE

Szymon
  • 1,281
  • 1
  • 20
  • 36
0

This Works

$(function(){
    $("body").click(function(e){
        e.preventDefault();
        $("<li>Another row</li>").appendTo("ul").hide().slideDown();
    });
});
VeteranLK
  • 717
  • 7
  • 17
-2

Not sure why, but I created a little sample animation deal here, and it doesnt work with that

 div.div-in-question{}

selector, just

.div-in-question{}

Try that.

http://jsfiddle.net/plushyObject/d06ynxy5/

plushyObject
  • 1,123
  • 6
  • 14
  • 1
    Yes but that works because you are specifying a new height of the div. The div is not growing dynamically. – Johnston Mar 06 '15 at 03:14
  • Playing with it. Here is fiddle to illustrate problem (sorry didnt see yours at first). http://jsfiddle.net/plushyObject/d06ynxy5/2/ – plushyObject Mar 06 '15 at 04:45