I got the animation to work but the row space is created first and then the content is lowered.
const toggle = e => {
document.querySelector(".hide")
? (document.querySelector(".hide").className = "")
: (document.querySelector("#hideMe").className = "hide");
};
document.getElementById("toggle").addEventListener("click", toggle);
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
tr {
display: table-row;
animation: slide-down 0.3s ease-out;
}
.hide {
display: none;
}
@keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<table border="1">
<tr id="toggle">
<td>test</td>
<td>test</td>
</tr>
<tr id="hideMe" class="hide">
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>
The rows (
tr
) of the tables (table
) do not accept a height less than that of their content, and this is why we cannot animate theheight
.Solution:
We can add a
div
in each cell (td
) to which we will modify itsmax-height
with a value large enough to display the content of greater height.Example
Credits: