Переход на страницу Nuxt vue-Router не работает во время выполнения цикла requestAnimationFrame

Question

У меня проблема с сочетанием переходов страниц nuxt / vue-router и метода js rerequestAnimationFrame. Я анимирую контейнер некоторых элементов с помощью rerequestAnimationFrame и CSS-свойства transform: translate. Например:

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 по умолчанию установлено на true. Элементы этого контейнера, включая nuxt-link (s) для маршрутизации на подстраницу.

Проблема:
Пока эта анимация запущена, и я нажимаю nuxt-link, маршрутизатор запускается, а переход страницы - нет. Таким образом, страница подстраницы будет отображаться напрямую без какого-либо плавного перехода между страницами.

Если я удаляю цикл requestAnimationFrame, переход страницы срабатывает корректно и все события beforeLeave и т. Д. Тоже.

Я пытался добавить событие onclick для элементов или контейнера, чтобы установить для свойства this.interrupt значение false, но это не работает. Событие запускается, но я думаю, что каждое действие маршрутизатора выполняется до следующего кадра анимации.

Итак, есть ли решение дождаться анимации кадра, а затем запустить маршрутизатор и переходные действия? Или другой способ правильно запустить переход в этом случае?

Большое спасибо!

Answer 1

Вы пробовали с защитой роутера ? С защитой beforeRouteLeave вы можете отложить изменение маршрута и вызвать next() callback всякий раз, когда анимация закончится.

Например, в компоненте вашей страницы вы можете иметь это:

{
  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()
    } 
  }
}