css-transitions - 设计具有固定高度和 Flexbox 的手风琴时的 Choppy/Jumping 幻灯片过渡

Question

我正在用 Svelte 设计一个带有填充的手风琴，就像 jQuery UI 的手风琴组件一样。每个菜单都由标头和内容元素组成 - 选择菜单时，使用{#if}指令显示内容，否则将其从视图中删除。我正在使用幻灯片过渡动画显示和隐藏内容元素。

如果没有固定高度（即整个手风琴元素根据各个菜单高度改变高度），过渡看起来很好。但是，使用 flexbox grow 强制手风琴菜单内容填充剩余高度会导致过渡“跳过”。看起来它根据菜单内容的原始高度跳过了过渡，而不是 flexbox-grown，但我不能确定。

代码可以在这里找到source/components/AccordionMenu.svelte：https : //codesandbox.io/s/interesting-wilbur-99ucu 通过修改单个菜单内容的高度可以更好地解决这个问题（通过将高度设置为强制隐藏它们0) 并使用自定义过渡而不是直接在 DOM 中添加和删除它们？

标签： css-transitionssvelte