Переход removeclass () в html таблицах

Question

Я хотел бы знать, как установить transition в методе removeclass.

Когда я добавляю классы, transition-duration работает хорошо, но когда я удаляю класс, нажимая кнопку undo, transition не работает.

Как мне установить transition-duration в removeClass?

С уважением

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

Answer 1

Просто добавьте переход в TD.

$(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;
}


td {
  padding: 5px;
  transition: 0.3s ease-in-out all;
}

<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>

Answer 2

При удалении класса aqua свойство transition также теряется

$(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");
    }
  })
});

.transition td{
  transition-duration: 0.4s;
}
.aqua{
  background-color: aqua;
}


td {
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="transition">
  <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>