Изменение размера элементов в гибком контейнере при использовании блоков Svelte #if

Question

Я использую Svelte и flexbox для добавления и удаления элементов из контейнера, при этом динамически изменяя размер постоянных элементов внутри контейнера, чтобы всегда занимать оставшееся пространство.

Я бы хотел добавить и убрать переходы элементов с помощью стройной «мухи».

Вот в чем проблема: постоянные элементы сразу же неуклюже прыгают до своих новых размеров, а не плавно анимируются вместе с входящими / выходящими элементами. Как сделать постоянные элементы анимированными при изменении их размера?

Я знаю, что это можно сделать с помощью анимированного «переворота», но это разрешено только внутри блока #each. Я надеюсь использовать блоки #if для управления входом и выходом элементов.

У меня есть ответ с образцом , но я также покажу код ниже.

JS

      import { fly } from 'svelte/transition'
let add = false;

HTML

      <main>
{#if add}
    <div transition:fly="{{ y: -200, duration: 2000 }}" class='box' id='add'>
        Added element
</div>
{/if}

<div class='box' id='permanent'>
    I would like this element resize smoothly when a new elements is added to the parent container.  Can I do this without an each block, though?
</div>

<button on:click={() => add = !add}>
    {add ? 'Remove ' : 'Add '} element
</button> 

CSS

      main {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box {
    border: 1px solid black;
    min-height: 50px;
}

#permanent {
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}