How to pass animate:flip to a component in svelte?

user_1422010 0
Viewed 489

I'm trying to animate this list of Widgets. Of course I can't just animate:flip a component, Svelte needs a DOM element.

<!-- invalid -->
{#each widgets as widget (widget.id)}
    <Widget {...widget} animate:flip/>
{/each}

I normally would have solved it with a simple container div:

<!-- does not apply to my situation -->
{#each widgets as widget (widget.id)}
  <div animate:flip>
    <Widget {...widget} />
  </div>
{/each}

However, as I'm using a CSS Grid around the #each, I need Widget to be the immediate child. I can't wrap it in anything. How can I solve this? Is there any way to pass animate:flip to the Widget component and handling it there?

Here is a REPL of what I'm trying to achieve. I'm unable to get the same behaviour when each row (containing three cells) is a Component.

svelte-component svelte-3 svelte-transition svelte
2 Answers

Aditionally to the

first solution >> table

Which was to use either <table>, <tr>, <td> or <div>s with display: table, table-row, table-cell to preserve the auto-width-adjustments of the columns -> REPL

I just had an idea for a

second solution >> subgrid

which is unfortunately only supported in Firefox 71+ (caniuse.com) at the moment, but might be worth knowing for the future anyway when it (hopefully!! ) have wide browser support eventually

With that you could have kept your original structure, with these adjustments:

  • add the wrapper-div for the 'row component'
  • style it with
display: grid;
grid-column: 1/-1;
grid-template-columns: subgrid;

and you're done :-)

This REPL illustrates the solution, when opened in firefox 71+

user_153888720

Idea 1: apply display: contents to the container div.

Idea 2: Obvious but maybe you can add animate:flip to the Widget component, maybe conditionally with a prop.

user_108927220
Related