Как передать animate:flip компоненту в svelte?

Question

Я пытаюсь оживить этот список виджетов. Конечно, я не могу просто компонент, 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-сетку вокруг , Мне нужно, чтобы виджет был непосредственным потомком. Я не могу ни во что его завернуть. Как я могу это решить? Есть ли способ пройти к компоненту Widget и обрабатывать его там?

Вот REPL того, чего я пытаюсь достичь . Я не могу добиться такого же поведения, когда каждая строка (содержащая три ячейки) является Компонентом.

Answer 1

Идея 1: применить display: contents в контейнер div.

Идея 2: очевидно, но, возможно, вы можете добавить animate:flip к Widget компонент, возможно, условно с опорой.

Answer 2

Дополнительно к

первое решение >> таблица

Который должен был использовать либо <table>, <tr>, <td> или <div>s с display: table, table-row, table-cellчтобы сохранить автоматическую настройку ширины столбцов -> REPL

У меня просто была идея

второе решение >> подсетка

который, к сожалению, на данный момент поддерживается только в Firefox 71+ (caniuse.com) , но, возможно, о нем стоит знать на будущее, когда он (надеюсь !! 🍀) в конечном итоге получит широкую поддержку браузера

При этом вы могли бы сохранить исходную структуру с помощью следующих корректировок:

• добавить обертку-div для 'компонента строки'
• стиль с

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

и вы сделали :-)

Этот REPL иллюстрирует решение при открытии в firefox 71+.