Nuxt reusable dynamic custom page transition with javascript hooks?

Question

I have a Nuxt.js site that I'm trying to get some fancy page transitions working on. I think I understand how you're supposed to use the transition setting when it's just CSS, but how do I make it reusable with JavaScript hooks?

It seems to me we should be able to do something like this:

// In a Page.vue template 
    transition(to, from) {
        if (!from) {
            return "fade"
        }
        if (to.name == "directors-name-work") {
            // Animate to video playing
            return "to-video"
        }
        if (from.name == "directors-name-work") {
            // Scroll to slideshow, and at same video we just came from.
            return "from-video"
        }
    }

And then I need to be able to define what the JS hooks are for to-video and from-video in JavaScript somewhere, but I have no idea where that goes? Where does enter() and beforeEnter() hooks get defined for the separate transitions? It makes sense if we just have one transition, then I could do it in a mixin. But when it is dynamic I have no idea.

Is there a file I should be putting somewhere called transition-to-video and transition-from-video?

tony19 · Accepted Answer · 2022-07-15 22:13:16Z

3

+100

It's currently undocumented, but the page's transition function can return a transition object, which may include the transition JavaScript hooks. This allows you to define your shared transition objects in a common file, and import them into a page as needed:

^{~/transitions.js:}

export default {
  fade: {
    name: 'fade',
    mode: 'out-in',
    beforeEnter(el) {
      console.log('fade beforeEnter')
    }
  },
  bounce: {
    name: 'bounce',
    afterEnter(el) {
      console.log('bounce afterEnter')
    }
  },
}

^{~/pages/about.vue:}

<script>
import transitions from '~/transitions'

export default {
  transition(to, from) {
    return to.query.fade ? transitions.fade : transitions.bounce
  },
}
</script>

edited Jul 15, 2022 at 22:13

answered Nov 24, 2019 at 15:30

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt reusable dynamic custom page transition with javascript hooks?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related