He conseguido que funcione la animación pero se crea antes el espacio de la fila y después baja el contenido.
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>