CSS transition to work when object is toggled by jQuery

Question

I have this simple horizontal chart script. When you click on the button, width of the filler changes to 100%.

I've tried to add transition to the .filler , but it does not work.

How can I animate it?

 $("#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

Add transition to filter class

.filter {transition: all 0.5s;}