如何在Vue中实现Svelte的Defer Transition

最近观看了Rich Harris的视频，惊叹于Svelte框架的高效同时，还发现了Vue所不具备的一些关于动画的原生支持―defer transitions.先看看Svelte所谓的defer transition的效果吧。这是使用Svelte做的Todo Demo应用。整个todo分成3个部分。输入部分，todo列表和done列表。在Svelte里，只需要仅仅加上几行代码，就能实现，对于开发者非常友好且高效。这里，in和out各自接受框架提供的函数receive和send并且给他们提供了筛选条件。这里的flip不是翻转，而是于是我就在想，如果是Vue的话，如何能达到相应的效果呢。由于是list的移动，所以我们这里使用transition-group。具体使用方法可以参考Vue教程要想达到同样的效果，有两大UI动画效果要实现。列表中条目消失时，剩余条目移动补齐空位为了实现第二个需求，有几个问题必须解决：