0

I want a custom page transition with dynamic content. With dynamic content I mean changing the color of the transition based on the clicked item. I am storing the selected color in a store, which works fine. But when the first card is clicked the default color appears in the transition. It seems that the beforeEnter(el) hook is not working properly and sets the new color after the first page transition.

In pages/index.vue

transition(to, from) {
    if(to.name === "referenz") {
        // returns a string
        return 'home';
    }

    return {
        name: 'home',
        mode: "",
        beforeEnter(el) {
            el.style.backgroundColor = this.$store.getters.getTransitionHEX
        },
    }
},
foka135
  • 167
  • 2
  • 13
  • `beforeEnter` is taking `from + to` as params as far as I know: https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard I think that here, your `el` is not what you expect. Maybe start by console logging what's inside. Also, keep in mind that `this` is probably not available when you call it as shown here: https://router.vuejs.org/guide/advanced/navigation-guards.html#using-the-options-api `vm` would replace `this` here like here: https://stackoverflow.com/a/68481014/8816585 – kissu Oct 17 '22 at 11:39
  • This documentation explains it a bit better since I am running nuxt.js https://nuxtjs.org/docs/components-glossary/transition/ I logged the el and this works, but it logs after the transition ended. – foka135 Oct 17 '22 at 11:42
  • Oh yeah, right it's nested inside of `transition`. Please double check that it contains what you expect tho. Also, regarding the transition, what are you using `fetch` or `asyncData`. Be sure to understand the various steps of the guards as explained here: https://stackoverflow.com/a/72138338/8816585 – kissu Oct 17 '22 at 11:46
  • Also, since you want to apply a DOM change you maybe need to use `nextTick` to update it before the changes are flushed: https://stackoverflow.com/a/55328457/8816585 That way, Nuxt will not wait for the whole thing to finish before applying changes to your DOM. – kissu Oct 17 '22 at 11:48
  • The used hex value I get is from a the fetch hook and the store value changes everytime I hove on an item. I logged the value, this works. Also tried nextTick(). It seems that the beforeEnter just not working on the first click and always sets the color after the transition already ended – foka135 Oct 17 '22 at 12:07
  • Is there a way to target the transition component in the html to bind a class to it? Because nuxt adds the component automatically to it :/ https://nuxtjs.org/docs/features/transitions/ – foka135 Oct 17 '22 at 12:13

0 Answers0