N
Nuxt2mo ago
brick

Components changing as page transition starts instead of after leave

Hello! I have a component that renders different content based on a prop that I am passing into it from different pages. When I navigate from one page to another that both have the component (but different content because it's a different prop) the content changes before the page transition fadeout finishes, causing an undesirable jump of content on the page. Any ideas on how to solve this? I am using global page transitions as noted below
// nuxt.config.ts

export default defineNuxtConfig({
app: {
pageTransition: { name: "page", mode: "out-in" }
}
});
// nuxt.config.ts

export default defineNuxtConfig({
app: {
pageTransition: { name: "page", mode: "out-in" }
}
});
/* app.vue */

<style>
.page-enter-active,
.page-leave-active {
transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
}
</style>
/* app.vue */

<style>
.page-enter-active,
.page-leave-active {
transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
}
</style>
// component.vue

<script setup lang="ts">
const props = defineProps(["tag"])
const data = fetchSomething(props.tag)
</script>

<template>
<div v-for="thing in data">
{{ thing }}
</div>
</template>
// component.vue

<script setup lang="ts">
const props = defineProps(["tag"])
const data = fetchSomething(props.tag)
</script>

<template>
<div v-for="thing in data">
{{ thing }}
</div>
</template>
// page.vue

<template>
<div>
<component tag="something" />
</div>
</template>
// page.vue

<template>
<div>
<component tag="something" />
</div>
</template>
1 Reply
Omnislash
Omnislash2mo ago
Hello Fully random thought : You can't play with the Transition hook to update/print your new contant after the transition ? https://nuxt.com/docs/getting-started/transitions (JavaScript Hooks) Never faced this use case sorry, my next best idea would be to have a look at the lifecycle with the same general idea : a way to deal with my data at the end at the transition Now that I'm thinking about what I'm writing, might be breaking the SSR if you need it ^^" ? I don't use it for my project so..... no other idea sorry