made with vue.js

Vue Starport

Shared Component across Routes with Animations

Visit Site

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


Social Media Links

Neodrag for Vue Draggable Directive
icon-eye-dark Created with Sketch. 1.696
icon-eye-dark Created with Sketch. 1.462
Sentry for Vue Vue Application Monitoring
πŸ’š Sponsored by Friends
We’re hosting on Digital Ocean! πŸ’™ Try it today and get a free $100 credit.
Pinia Vue Store
icon-eye-dark Created with Sketch. 17.928
Harlem Global State Management for Vue 3
icon-eye-dark Created with Sketch. 2.957