Javascript 运行requestAnimationFrame循环时Nuxt vue路由器页面转换不工作

我对nuxt/vue路由器页面转换和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

。 此容器的项包括用于路由到子页面的

numxt链接

问题：

当这个动画运行时，我点击一个
numxt链接
路由器会被触发，但页面转换不会被触发。因此，子页面将直接显示，页面之间没有任何平滑过渡

如果我删除
requestAnimationFrame
循环，页面转换将被正确触发，并且在离开之前的所有事件也将被触发

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

那么，是否有任何解决方案来等待动画帧，然后运行路由器和转换操作？或者在这种情况下，使用其他方法正确触发转换

非常感谢
 你试过了吗？使用
beforeRouteLave
guard，您可以延迟路线更改，并在动画完成时调用
next（）
callback

例如，在页面组件中，您可以有以下内容：

{
async BeforeRouteAve（到、从、下一个）{
试一试{
//在这里开始你惊人的异步动画
等待此消息。$myAmazingAnimationStart（）
//让我们假设动画开始在这里完成，
//现在我们可以调用“next（）”来更改路由
下一个（）
}捕捉（错误）{
console.log（'Anim error…'）
下一个（）
} 
}
}
谢谢您的帮助，但这是另一个错误。。。我通过DOM复制了一些元素，因此被动函数无法工作。我以
数据
的方式重新思考，并以vue的方式复制这些东西。因此，路由器和转换运行良好。