Using the animate directive inside an #if block

[oreilles]

This is possible:

{#each [1,2,3].filter(x => x%2) as f(f)}
  <div animate:flip />
{/each}

But this isn't:

{#each [1,2,3] as f(f)}
  {#if f%2}
    <div animate:flip />
  {/if}
{/each}

I'm in a situation where It would be very convenient to create different element depending on the {#each} block values with an {#if} block, while still being able to use the animate directive.

The only alternative would be to iterate the object twice (also filtering it twice), and use the crossfade transition, which wouldn't be nearly as efficient nor working as flawlessly as with the flip animation (see #4389).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Rich-Harris]

closing as dupe of #7209 (I know this came first, but the other one has more discussion!)