When you remove the class aqua the transition property also is lost
$(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>
Just add transition in 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>
I would like to know how to set transition in removeclassmethod.
When I add classes,transition-duration works well,but when I remove class by clicking undo button,transition doesn’t work.
How can I set transition-duration inremoveClass?
Best regards
$(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>
