vue-starport跨路由组件共享动画

前端 2024-09-17

2024-09-17

没有风暴，船帆不过是一块破布。——雨果

我们经常会在在不同的路由（页面）上使用同一组件，但他们的位置和大小可以不尽相同。这时你可能会希望在用户进行路由跳转时，想让它们展示流畅的过渡动画。尽管这样的动画在原生应用中较为常见，但要在 Web 中实现却有一些挑战。

Vue 的组件结构以树的形式呈现，在不同分支中的子组件有其各自的实例，这意味着当用户在路由之间跳转时，同样的组件并不会跨路由共享。

因为它们是两个不同的实例，这意味着你无法直接为它们的添加补间动画。幸运的是，有一种叫做 FLIP 的技术可以模拟不同组件之间的过渡动画。

然而，FLIP 只解决了过渡的问题，我们仍然还是会有两个组件实例。在跳转过程中，组件的内部状态将会丢失。

因此，我开始实验一个新的解决方案用于满足这一需求，并将其取名为 Starport。

在线Demo：

可以看到点击下方的图片后，页面路由发生跳转，但是切换的过渡动画非常自然和炫酷