Description

Shared Component across Routes with Animations

"It's quite common you might have a same component used in different routes (pages) with a bit different sizes and positions. Sometimes you might want to animate them when user navigates between routes to provide a smooth UX. While such animation is common to be seen in native apps, it's could be a bit challenging to do it in Web.

Vue's component structure is presented as a tree, and the child components are in different branches with their own instances. Meaning when users navigate between routes, the components are not shared across routes. By that means you can't directly animate the changes because they are in two different instances.

The good news is, there is a technique called FLIP to enumerate the transitions between them. However, FLIP only solves the problem of transitions, the components are still not the same. During the navigation, the internal state of the component will lost.

Thus I started this new approach Starport to experiment with a better solution to fit this requirement!"

Creator

Anthony Fu
@antfu7

• 
• 📊 Statistics