0

我正在使用 Svelte 和 flexbox 从容器中添加和删除元素，同时动态调整容器内永久元素的大小以始终占用剩余空间。

我想用苗条的“fly”添加和删除元素过渡进出。

这就是问题所在：永久元素会笨拙地立即跳转到它们的新大小，而不是与进入/退出元素一起平滑地制作动画。如何使永久元素在调整大小时具有动画效果？

我知道这可以通过动画“翻转”来完成，但这仅允许在 #each 块内。我希望使用#if 块来控制元素的进入和退出。

我有一个带有示例的 repl，但我也会在下面显示代码。

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;
}
4

0 回答 0