Nuxt•3mo ago

dynamic pagetransitions with js hooks

Hi, is there an example how this example from the docs would work with js hooks?

definePageMeta({
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  middleware (to, from) {
    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
      to.meta.pageTransition.name = +to.params.id > +from.params.id ? 'slide-left' : 'slide-right'
  }

definePageMeta({
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  middleware (to, from) {
    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
      to.meta.pageTransition.name = +to.params.id > +from.params.id ? 'slide-left' : 'slide-right'
  }

https://nuxt.com/docs/getting-started/transitions#dynamic-transitions because I do not have access to the pageTransition.name inside the onEnter hook

pageTransition: 
{
   name: "slide",
   onEnter: (el, done) => {
     // no access to pageTransition.name
     if(to.meta.pageTransition.name === "slide") {
       // slide ani
     }else{
       // fade ani
     }
   }

pageTransition: 
{
   name: "slide",
   onEnter: (el, done) => {
     // no access to pageTransition.name
     if(to.meta.pageTransition.name === "slide") {
       // slide ani
     }else{
       // fade ani
     }
   }

and pageTrannsition doesn't accept an array like

pageTransition: [
{
  name: "slide", 
  onEnter: (el, done) => {
  }
},
{
  name: "fade", 
  onEnter: (el, done) => {
  }
},
]

pageTransition: [
{
  name: "slide", 
  onEnter: (el, done) => {
  }
},
{
  name: "fade", 
  onEnter: (el, done) => {
  }
},
]

1 Reply

Gregor•3mo ago

ok found a way todo it in a global middleware

export default defineNuxtRouteMiddleware((to, from) => {
  const { $gsap } = useNuxtApp();
  from.meta.pageTransition.onLeave = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail leave");
      done();
    } else {
      console.log("all other routes leave");
      done()
    }
  };
  to.meta.pageTransition.onEnter = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail enter");
      done();
    } else {
      console.log("all other routes enter");
      done();
    }
  };
});

export default defineNuxtRouteMiddleware((to, from) => {
  const { $gsap } = useNuxtApp();
  from.meta.pageTransition.onLeave = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail leave");
      done();
    } else {
      console.log("all other routes leave");
      done()
    }
  };
  to.meta.pageTransition.onEnter = (el, done) => {
    if (to.meta.name === "car-detail") {
      console.log("ist cars detail enter");
      done();
    } else {
      console.log("all other routes enter");
      done();
    }
  };
});

is this the way ?

Gaming

Programming

dynamic pagetransitions with js hooks