Animate the width resize when add a larger text

Question

I'm having a problem animating the change in width of a div. More precisely, this div ("CSVStatus") changes width to fit the size of the text.I don't control it. But when it happen i would like to make it animate.

As you can see in this jsFiddle, the transition on the color change of the background works but not the transition on the width.

Here is the reproduction of the problem i encounter :

HTML:

<div id="CSVStatus"></div>
<br><br><br>
<div id="CSVBtn" type="button">Click here</div>

CSS:

#CSVStatus{
  background-color: #6c757d;
  float:left;
  height:36px;
  padding:5px;
  min-height: 25px;
  min-width: 25px;
  transition: background-color ease-in 1s, width ease-in 1s;
}

#CSVBtn{
  background-color:red;
  height: 20px;
  width: 80px;
  padding:15px;
}

JQUERY:

var status = 1;
$(CSVBtn).on("click",function(){
  //success
  if(status == 1){
    $('#CSVStatus').css("background-color","#28a745");
    $('#CSVStatus').text("Uploaded");
    status++;
  }
  //warning
  else if(status == 2){
    $('#CSVStatus').css("background-color","#ffc107");
    $('#CSVStatus').text("Uploaded, but no config found");
    status = 1;
  }
});

So how to make this autoResize animate ?

Thanks for help

Looks like you're trying to animate to `auto` and that's not possble with JQuery as such. — Paulie_D, Dec 03 '18 at 16:27
https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Paulie_D, Dec 03 '18 at 16:29

score 1 · Answer 1 · answered Dec 03 '18 at 21:53

1

The issue was your not actually running an animation.

Have a look at this fiddle: https://jsfiddle.net/hsu0w562/72/

I've added the following jQuery animation which may help you get to the outcome you want:

$("#CSVStatus").animate({
    width: '200px',
    backgroundColor: '#ffc107'
});

answered Dec 03 '18 at 21:53

Dylan Anlezark

1,256
2
12
27

Thanks you for your help. The probleme remain the same, there is no animation after setting the width and when the text come shorter, the div will not fit by herself with the text width as it do ordinarely – Ezap Dec 05 '18 at 08:08

Animate the width resize when add a larger text

1 Answers1