如何将 animate:flip 传递给 svelte 中的组件？

Question

我正在尝试为这个 Widget 列表添加动画。当然我不能只是 animate:flip 一个组件，Svelte 需要一个 DOM 元素。

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

我通常会用一个简单的容器来解决它 div:

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

但是，由于我在 #each 周围使用 CSS 网格，因此我需要将 Widget 作为直接子项。我不能用任何东西包裹它。我该如何解决这个问题？有没有办法将 animate:flip 传递给 Widget 组件并在那里处理它？

这里是a REPL of what I'm trying to achieve。当每一行（包含三个单元格）是一个组件时，我无法获得相同的行为。

Answer 1

想法 1：将 display: contents 应用于容器 div.

想法二：很明显，但也许你可以将 animate:flip 添加到 Widget 组件，也许有条件地使用 prop.

Answer 2

除

这是使用 <table>, <tr>, <td> 或 <div>s 和 display: table, table-row, table-cell 来保留列的自动宽度调整 -> REPL

我刚想到一个

不幸的是，目前仅在 Firefox 71+ (caniuse.com) 中受支持，但无论如何（希望！！）最终支持广泛的浏览器

通过这些调整，您可以保留原来的结构：

display: grid;
grid-column: 1/-1;
grid-template-columns: subgrid;

大功告成:-)

此REPL说明了解决方案，在 firefox 71 中打开时+

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