在具有动态内容的容器上调整高度动画

Question

我是 svelte 的新手，我正在使用 svelte/animate 和 svelte/transitions 模块。主要问题是当添加/删除新内容时如何为容器高度设置动画。

我尝试了一些使用 svelte/motion 中的补间的方法，但我似乎无法找到正确的解决方案，除非我做了一些恶作剧，包括用溢出包装 div。 REPL- 使用计数器加载/卸载更多元素以查看删除/添加行时的问题

正如我所说，我对 Svelte5 还很陌生。因此，我不太确定我是否正确使用了 svelte/animate 和 svelte/transitions，如果有人可以对这两个以及何时使用它们进行一些解释，我们将不胜感激。

Answer 1

在 DOM 中添加或删除元素时，会运行 Svelte 转换。 由于您想要对已经存在的容器的更改进行动画处理，并且不会被删除/重新添加，因此过渡不是可行的方法。 他们就是不会跑。

你需要的是动画。 然而，Svelte 仅支持带有

animate:flip

的动画。 但是，动画只能在带关键帧的

{#each}

块的直接子级上完成。

我想说的是，Svelte 无法为您提供您需要的动画工具。 探索替代方案，例如纯 CSS 动画。