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

Question

我正在尝试为这个小部件列表设置动画。当然我不能只是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}

但是，当我在 . 周围使用 CSS Grid 时#each，我需要 Widget 作为直接子级。我不能把它包在任何东西里。我该如何解决这个问题？有什么方法可以传递animate:flip给 Widget 组件并在那里处理它？

这是我想要实现的 REPL。当每一行（包含三个单元格）都是一个组件时，我无法获得相同的行为。

score 2 · Accepted Answer

除了

哪个是使用<table>, <tr>, <td>or <div>s withdisplay: table, table-row, table-cell来保留列的自动宽度调整 -> REPL

我只是有一个想法

不幸的是，目前仅在 Firefox 71+ (caniuse.com)中受支持，但是当它（希望！！）最终获得广泛的浏览器支持时，将来可能值得知道

有了这些调整，您就可以保留原来的结构：

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

你完成了:-)

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

score 0 · Accepted Answer

思路一：应用于display: contents容器div。

想法 2：很明显，但也许您可以添加animate:flip到Widget组件中，也许有条件地使用道具。

2 回答 2