Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alexis_G

onComplete not firing in Vue.js router navigation guards

Recommended Posts

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.
 

Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×