Nuxt vue-Router page-transition not working while requestAnimationFrame loop is running

Question

I have a problem with the combination of the nuxt/vue-router page-transitions and the js method rerequestAnimationFrame. I'm animating the container of some items with rerequestAnimationFrame and the transform: translate CSS property. Like this:

const step = timestamp => {
    itemContainer.style.transform =
      'translateX(' + this.animationStep * -1 + '%)'
    this.animationStep = this.animationStep + 1           
    if (this.interrupt) window.requestAnimationFrame(step)
  }
  window.requestAnimationFrame(step)

this.interrupt is set to true by default. The items auf this container including nuxt-link(s) for routing to a subpage.

The Problem:
While this animation is running and I click a nuxt-link the router gets triggered, but the page-transition not. So the subpage page will be displayed directly without any smooth transition between the pages.

If I remove the requestAnimationFrame loop the page-transition is triggered correctly and all events beforeLeave etc.too.

I tried to to add an onclick event on the items or the container to set the this.interrupt property to false but this doesn't work. The event is fired, but every router action is running before the next animation frame I think.

So, is there any solution to wait for animation frame and than run the router and transition actions? Or a other way to trigger the transition correctly in this case?

Thanks a lot!

Microcipcip Microcipcip · Accepted Answer · 2019-10-09T08:44:18

Have you tried with the router guards? With the beforeRouteLeave guard you can delay the route change and call next() callback whenever the animation has finished.

For example, in your page component you could have this:

{
  async beforeRouteLeave(to, from, next) {
    try {
      // Start your amazing async animation here
      await this.$myAmazingAnimationStart()

      // Let's suppose that here the animation start is finished,
      // so now we can call 'next()' to change route
      next()
    } catch(err) {
      console.log('Anim error...')
      next()
    } 
  }
}

Nuxt vue-Router page-transition not working while requestAnimationFrame loop is running

1 Answers