Animate elements outside an each block

Question

I have a simple "todo list" style app that uses an {#each} block to render a list of <Item /> elements. I'm using Svelte's animate directive to make the list items slide up or down when items are added or removed. This works great.

The issue is that I also have a <Footer /> component that's fixed to the bottom of the list of items. Because this is outside the each block, it doesn't get the animation effect, so it immediately jumps up and down when items are added or deleted rather than moving in sync with the list items above.

I tried adding the animate directive to the <Footer /> but per the Svelte docs, animate can only be used on an element that's the immediate child of a keyed each block, so this doesn't work.

Is there a way to do this using animation in Svelte? And if not, can this effect be achieved using vanilla CSS/JS?

Example REPL (animate duration slowed down to better show the issue)

<div class="items-container">
    {#each $items as item (item.id)}
        <div animate:flip={{ duration: 200 }}>
            <Item id={item.id} text={item.text} />
        </div>
    {/each}
    <Footer />
</div>

Screenshot of item list with Footer

Answer 1

In your example you could use transition:slide instead of animate:flip to smoothly add/remove items - first transition tutorial

If flip animation is needed because items are reordered, autoAnimate seems to be an alternative - REPL (doesn't seem to be working in combination with crossfade)

The dimension of the container element just doesn't seem to be animated with Svelte's animate:flip directive. When giving the list elements a border in the tutorial lesson they also directly jumps to their final size. Here's a similar question with a workaround for adding a different element to the #each loop so that is moves with the other elements in case animate:flip should be used for whatever reason.