svelte - 如何传递动画 :flip to a component in 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}

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

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

Answer 1

除此之外

第一个解决方案>>表格

哪个是使用 <table>, <tr>, <td>或 <div>与 display: table, table-row, table-cell保留列的自动宽度调整 -> REPL

我有个想法

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

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

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

• 为“行组件”添加 wrapper-div
• 设计风格

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

大功告成:-)

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