CSS переход в работу при переключении объекта на jQuery

Question

У меня есть этот простой скрипт горизонтального графика. При нажатии на кнопку ширина наполнителя меняется на 100%.

Я пытался добавить переход к .filler, но не работает.

Как мне оживить это?

$("#button").on("click", function() {
  $(".filler").css("width", "100%");
  $(".filler").html("100%");
});

.borders {
margin: 10px 0px 10px 0px;
width: 200px;
border: 1px solid black;
}

.filler {
background-color: green;
white-space: nowrap;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click me to fill the chart</button>

<div class="borders">
<div class="filler" style="width:15%;">15%</div>
</div>

Answer 1

Добавить переход в класс фильтра

.filter {transition: all 0.5s;}