Анимация изменения ширины при добавлении текста большего размера - PullRequest
Новая
       15

Анимация изменения ширины при добавлении текста большего размера

0 голосов
/ 03 декабря 2018

У меня проблема с анимацией изменения ширины div.Точнее, этот div ("CSVStatus") изменяет ширину, чтобы соответствовать размеру текста. Я не контролирую это.Но когда это произойдет, я бы хотел сделать его анимированным.

Как вы можете видеть в этом jsFiddle , переход на изменение цвета фона работает, но не переход на ширину.

Вот воспроизведение проблемы, с которой я столкнулся:

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

Так как сделать анимацию авторазмера?

Спасибо за помощь

1 Ответ

0 голосов
/ 04 декабря 2018

Проблема заключалась в том, что вы на самом деле не запускали анимацию.

Посмотрите на эту скрипку: https://jsfiddle.net/hsu0w562/72/

Я добавил следующую анимацию jQuery, которая может помочь вам добраться дожелаемый результат: 

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