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

【问题标题】：How to pass animate:flip to a component in svelte?如何将 animate:flip 传递给 svelte 中的组件？
【发布时间】：2021-12-18 06:44:22
【问题描述】：

我正在尝试为这个小部件列表制作动画。当然我不能只 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。当每一行（包含三个单元格）都是一个组件时，我无法获得相同的行为。

【问题讨论】：

Widget里面的html结构怎么样？也许你可以做一个小的REPL？
这是一个example，其网格包含一个组件。在您的情况下，不可能使用带有动画的包装器 div 有什么不同？
@Corrl 感谢您对此进行调查！我已经根据我的情况调整了您的示例：svelte.dev/repl/4707e7f2469e42ac80771d1314b51e49?version=3.44.1。在这里，包装组件会破坏 CSS 网格。
由于您基本上是在尝试为行设置动画，因此您必须将网格拆分为两个组件：1 列和 n 行的外部网格，并且对于每个行，应用相同的 p 列内部网格。像这样：svelte.dev/repl/d0a93034de2c4c27b3f1beb313427c1a?version=3.44.1
谢谢安娜，明白你的意思了！我去看看……

【解决方案1】：

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

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

【讨论】：

'display: contents' 听起来是个好主意，但不幸的是它似乎破坏了动画 - 刚刚在这个 REPL 中尝试过
谢谢你 Zachiah。想法 1 似乎行不通。你能解释一下你所说的想法 2 是什么意思吗？
widget 组件里面有什么？你能把animate:flip放进去吗？
@Zachiah 我在这里做了一个 REPL 来展示这个例子：svelte.dev/repl/4707e7f2469e42ac80771d1314b51e49?version=3.44.1 这是我想要制作动画的下层网格。

【解决方案2】：

除了

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

我刚刚有了一个想法

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

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

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

你就完成了:-)

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

【讨论】：