CODEWITHSUNDEEP
htmlcss
Eduardo Poço
Eduardo Poço

Reputation: 3089

Table width css transition because of row delete: does not fire

After a row is deleted from a table, its width may change. However, the table's width transition does not fire, probably because the width css property was never changed directly, only its calculated value.

How do I make a table smoothly animate its width after a row is deleted, even if its css style width has not changed?

Example:

<style>
table {
    transition: all 500ms ease-in-out;
}
</style>
<script>
function test(button) {
    var el=document.getElementById("to-delete");
    el.parentNode.removeChild(el);
    button.parentNode.removeChild(button);
}
</script>
<table>
<tr><td>id</td><td>type</td></tr>
<tr id="to-delete"><td>165495</td><td>user</td></tr>
<tr><td>12</td><td>user</td></tr>
</table>
<button onclick="test(this)">Test</test>

The same moment the row is deleted, the table width abruptly changes its width to the final value, despite the css transition:

table {
    transition: all 500ms ease-in-out;
}

Is there any way to make the table obey the rule in this case?

Upvotes: 2

Views: 742

Answers (1)

Brilliand
Brilliand

Reputation: 13714

It sounds like you want to animate the width of every column, and the height of the deleted row, to get a smooth effect all-around. CSS doesn't have an explicit command for this purpose, but it does have...

Animating the font size

If you can just get all the contents of the row to shrink away smoothly, then the browser's regular table handling will do what you're looking for.

<style>
td {
    transition: font-size 500ms ease-in-out, padding 500ms ease-in-out;
}
.deleting > td {
    font-size: 0;
    padding: 0;
    border-width: 0;
    color: transparent;
}
</style>
<script>
function test(button) {
    var el=document.getElementById("to-delete");
    el.className = "deleting";
    window.setTimeout(function() {
        el.parentNode.removeChild(el);
    }, 1000);
    button.parentNode.removeChild(button);
}
</script>
<table>
<tr><td>id</td><td>type</td></tr>
<tr id="to-delete"><td>165495</td><td>user</td></tr>
<tr><td>12</td><td>user</td></tr>
</table>
<button onclick="test(this)">Test</test>

For the simple example in the question, animating the font size gets very close, and animating the padding gets the rest of the way. If you have more complex contents in your table cells (that aren't sized entirely in terms of ems), you may have to do something more complicated, such as replacing the contents with a div of the same size and then shrinking that div to nothing via the height/width properties.

Upvotes: 1

Related Questions