I am looking to add animation effects when table rows appear and disappear.
Initially, I attempted using a CSS transition, but it did not work due to the change in the display property.
Subsequently, I opted for an animation, which provided the desired outcome.
However, there is an issue where the entire height of the row is reserved at the start of the animation. Refer to the snippet below for a visual representation: Row 3 gets pushed down immediately, prior to the onset of the animation.
Is there a way to animate the row's height gradually, ensuring it only occupies necessary space?
Furthermore:
- The method should not necessitate a fixed height for the rows
- The animation should resemble a translation rather than a scale transformation; giving the impression that it's sliding from the bottom of the row above it
- The animation must be bi-directional (able to reverse upon hiding)
$('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>