如何将 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 网格#each，因此我需要 Widget 作为直接子级。我无法用任何东西包裹它。我该如何解决这个问题？有什么方法可以传递animate:flip到 Widget 组件并在那里处理它吗？

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

Answer 1

除了

第一个解决方案 >> 表

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

我只是有一个想法

第二种解决方案>>子网格

不幸的是，目前仅在 Firefox 71+ (caniuse.com)中受支持，但无论如何，当它（希望！！）最终获得广泛的浏览器支持时，可能值得了解一下

这样，您就可以保留原来的结构，并进行以下调整：

• 为“行组件”添加包装器 div
• 设计它的风格

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

你就完成了:-)

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