How to add transitions/animations to e.g. table rows?

[brendan-morin]

Hi everyone, I'm looking for some basic ideas for how to add animations or transitions to flowbite-svelte table rows. Let's say I have a table like this:

<Table>
  <TableHead>
    <TableHeadCell class="w-1">Time</TableHeadCell>
    <TableHeadCell class="w-1">User</TableHeadCell>
  </TableHead>
  <TableBody>
    {#each notes as note}
      <TableBodyRow>
        <TableBodyCell>{note.created}</TableBodyCell>
        <TableBodyCell>{note.user}</TableBodyCell>
      </TableBodyRow>
    {/each}
  </TableBody>
</Table>

And it renders something like this (the picture has some more features, but the above code should be accurate enough to get the point):

If a user inserts a new row, deletes a row, or some action triggers row reordering, I call invalidateAll() and it fetches new data, which should reflect the updated order, provided by the server. My goal is to animate this with some smoother transitions.

One challenge I'm running into is that svelte doesn't allow transitions or animations on components (e.g. Transitions can only be applied to DOM elements, not components svelte(invalid-transition)). Adding divs to wrap these components (similar to this discussion) in the context of a table does create the desired transitions, but creates layout issues. For example, if I try to just wrap the rows like this:

<Table>
  <TableHead>
    <TableHeadCell class="w-1">Time</TableHeadCell>
    <TableHeadCell class="w-1">User</TableHeadCell>
  </TableHead>
  <TableBody>
    {#each notes as note}
      <div animate:flip={{ duration: 300 }}>
        <div in:fade={{ duration: 300 }} out:slide={{ duration: 300 }}>
          <TableBodyRow>
            <TableBodyCell>{note.created}</TableBodyCell>
            <TableBodyCell>{note.user}</TableBodyCell>
          </TableBodyRow>
        </div>
      </div>
    {/each}
  </TableBody>
</Table>

Then we end up having display issues with the row widths, and other problems (horizontal lines, etc):

Is there any recommended workaround that could be employed to allow these transitions without messing up the table behavior?