Nuxt.js: specific transitions for different route within page component

[max-schu]

since theres no direct access to "this" in the transition object / js hooksof a page, is it even possible to create custom enter and leave transitions with javascript hooks instead of css, or different transition names?

i'm doing this with plain vue.js this way:

router-view.view(ref='page')

then:

enter (el, done) {
  this.$refs.page.enter
  ? this.$refs.page.enter(el, done)
  : TweenLite.from(el, 0.5, { alpha: 0, onComplete: done() })
}

_{This bug report is available on Nuxt.js community (#c490)}

[max-schu]

should have mentioned before:
the issue is – "leave" hook in the transition object of nuxt doesnt trigger for the current route but for the next route.

so if you define "leave" for a component, it's not gonna be fired when leaving the route, instead it fires the leave hook of the incoming route.

[max-schu]

@Atinux is this intended? doesn't make sense to me…

[Atinux]

We don't overwrite Vue.js config as you can see here: https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-child.js

I believe this is related to Vue.js directly.

Can you provide a reproduction repository so I can take a look at it @max-schu ?

[smyth64]

@max-schu I know what you mean.

It's really strange, because when I leave the current route, the leave hook of the next route will be used for the transition =/

[smyth64]

I made a reproduction repo here:

https://github.com/smith64fx/nuxt-transition-repro

If you run it and switch the sites from About <-> Test, you will get the issue.

When I switch from About to Test, the leave hook of Test will be triggered instead of the leave hook of About. So in the About component I have no real "leave" transition. The Test component's leave hook will be used for the About components leave hook.

[max-schu]

thanks alot @smith64fx for creating a repo, i honestly couldn't find the time yet to do so, and for now sadly decided to discontinue the use of nuxt for my projects.

[Atinux]

Thanks @smith64fx, we'll take a look at it.

[sdras]

+1, I'm seeing this as well. It's creating a problem for some more complex transitions I'm creating, let me know if you need an isolated test case, happy to provide it.

[max-schu]

it might be related to transition mode not being set to 'out-in' – just a educated guess.

[sdras]

Mine is set to 'out-in' so that's not the case for me, and not in the repro either

[pi0]

With 549b8da transitions should be combined together so that beforeLeave, leave, afterLeave and leaveCancelled are being picked from source route. (If available). Also nuxt-child's instance is available in transitions hooks using this and this.$el. (2b2d9e5)

Demo:

[sdras]

you're a rockstar, @pi0, thanks so much

[Atinux]

Closing it since rc3 is out :)

[robbue]

I'm trying to access _this_ inside the _transition_ object, but the __uid_ for comp are different? So I can't access methods in the comp (57) from the transition hooks. Using 1.0.0-rc11.

created () {
   console.log(this._uid); // 57
},

beforeMount() {
   console.log(this._uid); // 57
},

mounted () {
   console.log(this._uid); // 57
},

transition: {
   mode: 'out-in',
   css: false,

   beforeEnter: function (el) {
      console.log(this._uid); // 15
   },

   enter: function (el, done) {
      console.log(this._uid); // 15
      done();
   },

   afterEnter: function (el) {
      console.log(this._uid); // 15
   }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.