Como animar a alternância de linhas da tabela?
Quero animar a aparência e o desaparecimento das linhas da tabela.
Primeiro de tudo, tentei usar um CSStransição, mas não fez nada devido à alteração dodisplay
propriedade.
Então eu usei umanimação, que funciona conforme o esperado.
O problema é,a altura total da linha é reservada quando a animação começa. Veja o trecho abaixo para obter uma ilustração do problema: A Linha 3 é empurrada para baixo imediatamente, antes do início da animação.
Como posso animar progressivamente a altura da linha, para que ela ocupe apenas o espaço necessário?
E como um bônus:
deverianão requer uma altura fixa para linhasdeve aparecer como uma tradução, e não como uma escala; deve parecer que édeslizando da parte inferior da linha acima deladeveria serbidirecional (faça o oposto quando eu o escondo)$('button').on('click', function() {
$('tr:nth-child(2)').toggleClass('active');
});
@keyframes anim {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
tr {
background: #eee;
border-bottom: 1px solid #ddd;
display: none;
transform-origin: top;
}
tr.active {
display: table-row;
animation: anim 0.5s ease;
}
td {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
<tbody>
<tr class="active">
<td>Row 1</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Row 2</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="active">
<td>Row 3</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>