Javascript 苗条动画-从设置关键帧的每个块中删除项目时不需要的重叠内容

我计划向现有的苗条应用程序添加通知，向用户显示错误、警告和信息消息。我从一个简单的想法开始，显示一个消息框列表，这些消息框可以在几秒钟后被点击或消失。这没问题，但当我开始添加过渡和动画使它看起来更令人愉快时，我被卡住了。下面是一个简化的REPL版本，演示了该问题：

单击按钮使一些框出现，单击框并将其删除，当所有框都消失后，按钮返回

当用户单击消息框时，页面的下部会在移除消息框之前跳起来。从顶部移除长方体时，效果将可见

我希望页面的下半部分与列表元素同步向上滑动。或者，至少在动画完成后跳起来，而不是在动画开始时跳起来

---

有没有人发现我在REPL上犯的错误，或者知道如何使用svelte实现这一点？

使用幻灯片过渡比使用animate:指令更容易实现：

import {flip} from 'svelte/animate'; import {slide} from 'svelte/transition';

---

.

非常感谢！这是伟大的，正是我心目中的效果。我最初认为我可以用一个“混合”列表来解决这个问题，该列表在开头包含所有通知，在结尾包含页面的其余部分，但这感觉太“黑客”了，所以我最好问一下。现在我可以试着弄清楚，如何在通知中添加一个可见的“out”转换。“飞入”起作用，“向外扩展”被忽略或隐藏。但即使我找不到方法：我也在代码中使用该解决方案。再次感谢！我终于明白了其中的神奇之处，花了一段时间来理解所有在这里一起工作的转换的目的。因此，我设法在通知框中添加了一个漂亮的输出转换。现在准备好隆隆作响了。 <div animate:flip={{delay: 1000, duration: 500}}> <div out:slide={{delay: 1000, duration: 500}}> <Message {text} on:click="{() => remove(text)}" /> </div>