Question

我对nuxt / vue-router页面转换和js方法rerequestAnimationFrame的组合有疑问。我正在使用rerequestAnimationFrame和transform: translate CSS属性为某些项目的容器设置动画。像这样：

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个路由到子页面的项目。

问题：
在运行此动画时，我单击nuxt-link会触发路由器，但不会触发页面转换。因此，子页面页面将直接显示，而页面之间不会有任何平滑过渡。

如果我删除了requestAnimationFrame循环，则会正确触发页面转换，所有事件beforeLeave等也将被触发。

我试图在项目或容器上添加onclick事件，以将this.interrupt属性设置为false，但这是行不通的。事件被触发，但是我认为每个路由器动作都在下一个动画帧之前运行。

那么，有什么解决方案可以等待动画帧，然后运行路由器和过渡动作？还是在这种情况下可以正确触发过渡的另一种方法？

非常感谢！

Answer 1

您尝试过with the router guards吗？借助beforeRouteLeave防护，您可以延迟路线更改并在动画结束时调用next()回调。

例如，在页面组件中，您可以这样做：

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

运行requestAnimationFrame循环时，Nuxt Vue-Router页面转换不起作用

1 个答案: