onComplete not firing in Vue.js router navigation guards

[Alexis_G]

Hi,

 

I'm using in components navigation guards with vue router to manage transitions between vues but can't get the onComplete firing the "next" argument:

 

  beforeRouteLeave(to, from, next) {
    const self = this
    const { Im } = self.$refs
    const tl = new self.TimelineLite
    tl.to(Im, .4, {
      y: -40, 
      opacity: 0,
      onComplete: next
    })
  }

 

So I ended up with this kind of hacky solution:

 

  beforeRouteLeave(to, from, next) {
    const self = this
    const { Im } = self.$refs
    const tl = new self.TimelineLite
    tl.to(Im, .4, {
      y: -40, 
      opacity: 0,
      // onComplete: next
    })
    setTimeout(function(){
      next()
    }, 400)
  },

 

Any ideas about how I could actually trigger the "next()" argument with the onComplete callback?

Thks.
 

[GreenSock]

Welcome to the forums, @Alexis_G!

 

Sounds like maybe it's a scope issue. Try setting onCompleteScope: this or onCompleteScope: self. 

 

If you're still having trouble, please provide a reduced test case in codepen and we'd be happy to take a peek and see what's happening. 

 

Another option (though more verbose) is: 

onComplete:function() {
    next();
}

 

But again, I bet that setting onCompleteScope will solve things. Oh, you could do callbackScope instead because that covers all the callbacks (not just onComplete). 

 

Happy tweening!

[Alexis_G]

Ho yes! Working perfectly, thank you.