如何在Vue中实现类似Svelte的Defer Transition功能？

本文共计1561个文字，预计阅读时间需要7分钟。

最近观看了Rich Harris的Rethinking Reactivity视频，对Svelte框架的高效同时性印象深刻。还发现Vue在动画方面的一些原生支持不足——defer transitions。先看看Svelte所讲的defer transition的效果吧。

最近观看了Rich Harris的<Rethinking Reactivity>视频，惊叹于Svelte框架的高效同时，还发现了Vue所不具备的一些关于动画的原生支持—defer transitions.

先看看Svelte所谓的defer transition的效果吧。

这是使用Svelte做的Todo Demo应用。整个todo分成3个部分。输入部分，todo列表和done列表。当点击todo列表中的条目时，相应条目会被“移动”到done列表，反之亦然。

在这里，条目从一个列表转移到另一个列表，不是很突兀的闪现，而是非常友好地从点击处，移动到目的地；同时，当列表中条目离开时，剩余的条目会丝滑地向上移动填补空缺的位置。在Svelte里，只需要仅仅加上几行代码，就能实现，对于开发者非常友好且高效。