3

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>

1 respuesta 1

4

Las filas (tr) de las tablas (table) no aceptan una altura menor a la de su contenido, y es por esto que no podemos animar el height.

Solución:

Podemos agregar un div en cada celda (td) al cual modificaremos su max-height con un valor lo suficientemente grande para mostrar el contenido de mayor altura.

Ejemplo

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,td {
  padding: 0;
}
tr {
  opacity: 1;
  transition: opacity 0.6s;
}
tr td div {
  max-height: 100px;
  padding: 4px;
  opacity: 1;
  transition: max-height 0.6s, padding 0.6s, opacity 0.6s;
}
tr.hide td div {
  opacity: 0;
}
tr.hide td div {
  max-height: 0;
  padding: 0 4px;
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden;
}
<table border="1">
  <tr id="toggle">
    <td><div>test</div></td>
    <td><div>test</div></td>
  </tr>
  <tr id="hideMe" class="hide">
    <td><div>test</div></td>
    <td><div>test</div></td>
  </tr>
  <tr>
    <td><div>test</div></td>
    <td><div>test</div></td>
  </tr>
</table>

Créditos:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.