Can someone please advise me on how to include a transition in the removeClass method?
When I add classes, the transition-duration works perfectly fine. However, when I try to remove a class by clicking the 'undo' button, the transition effect does not seem to work.
Is there a way to ensure that the transition-duration is applied even when using the removeClass method?
Thank you in advance!
$(function() {
let clicked = [];
$("td").click(function() {
let clickedID = $(this).attr('id');
clicked.push(clickedID);
$(this).addClass("aqua");
});
$("#undo").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass("aqua");
}
})
});.aqua{
background-color: aqua;
transition-duration: 0.4s;
}
td {
padding: 5px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>
<button id="undo">undo</button>