nuxt route transition

[Razz21]

Hi, I want to implement flip between route components, but any solution I found for vue not working. I was trying to wrap default layout component in Flipper, but animation still do not trigger. sample repo

Thank you.

Edit: Route transition works, if in layout I replace <nuxt> component to <router-view>, but not sure it's right solution for Nuxt.

[mattrothenberg]

Hi @Razz21, looking into this. Stay tuned.

[mattrothenberg]

I've traced the issue to this these lines in the nuxt-child component implementation.

return h('transition', {
      props: transitionProps,
      on: listeners
    }, [routerView])

For whatever reason, wrapping the routerView in a transition prevents the Flipper component from performing the animation.

Going to keep on digging, but at least we know where the issue is coming from.

In the meantime, I think it's totally OK to use router-view instead of nuxt.

[mattrothenberg]

I got the nuxt component working by switching the default transition mode to in-out inside of nuxt.config.js.

mode: "universal",
pageTransition: {
  mode: "in-out"
},

[Razz21]

Thanks for response. Switching page transition mode helps, but transition is not smooth. I am fairly new to Nuxt and I am afraid i can l lose lots of its features replacing nuxt with router-view.

[mattrothenberg]

@Razz21 Got it. Unfortunately, there's not much more I can do to help on this front.

Keep tweaking the pageTransition attribute until you can get the animation smooth, otherwise you'll have to use <router-view>.

If you'd like, please open an issue on the Nuxt repo and cross-link it to this one. It'd be curious to hear what they have to say!

[Razz21]

The problem is caused by transition feature/component, I did not found solution yet, but router-view without transition wrapper works fine. Only solution I see is to use Flipper locally in nested routes and use router-view instead of nuxt-child, this way flip still works fine and app should not lose Nuxt features (global page transitions etc.) for another components. Thank for help again.

[zhenyu-dev]

It took me like three hours to find the <nuxt /> component problem, really hope there is some documents about this.

[mattrothenberg]

PRs are welcome to make the documentation better!

On Sun, Nov 29, 2020, 04:46 LZY notifications@github.com wrote:

It took me like three hours to find the component problem, really hope there is some documents about this.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mattrothenberg/vue-flip-toolkit/issues/21#issuecomment-735367837, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHI7NGEWWJW4VRUJYGRA2TSSIJ6JANCNFSM4KLFOWNA .

[zhenyu-dev]

I'd love to, however, english is not my first language, I am afraid that I can't describe it correctly. sorry.

PRs are welcome to make the documentation better! … On Sun, Nov 29, 2020, 04:46 LZY @.***> wrote: It took me like three hours to find the component problem, really hope there is some documents about this. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <github.com/notifications/unsubscribe-auth/ABHI7NGEWWJW4VRUJYGRA2TSSIJ6JANCNFSM4KLFOWNA> .