Vue Starport
made with Vuejs

The author discusses the challenge of animating Vue components with different sizes and positions across routes and introduces Starport as a new approach to experiment with better solutions.

在Web应用中，在不同的路由（页面）上使用尺寸和位置略有不同的相同组件，并在用户导航时进行动画处理以提供流畅的用户体验，这是一个常见的需求，但实现起来可能有些挑战。Vue的组件结构呈现为树状，子组件位于具有自己实例的不同分支中。这意味着当用户在不同路由之间导航时，组件并不是跨路由共享的。因此，不能直接对更改进行动画处理，因为它们位于两个不同的实例中。好消息是，有一种名为FLIP的技术可以枚举它们之间的过渡。但是，FLIP仅解决了过渡问题，组件仍然不相同。在导航期间，组件的内部状态将会丢失。因此，我开始尝试一种新的方法Starport，以寻找更适合此需求的解决方案！

示例