Vue.js 在VUE CLI中使用this.router.push和动画跟踪结束进行转换

我真的希望得到你的帮助！我是一个初学者，这是我在创建web应用程序方面的第一次经验

我使用Vue Cli，有一个lottie元素应该通过单击来设置动画（我做到了），然后我应该转到“其他页面”（我做到了），但是，如何仅在动画完成后实现到页面的转换？救命啊！不客气！对于动画，我使用Anime.js

从“../js/animate”导入{translate}
导出默认值{
方法：{
去（）{
翻译（此.$refs.square）
这是。$router.push（'compressore'）
}
}
}

/vue

您可以使用callback等待动画完成

现在，您的代码可能如下所示：

。。。
去（）{
翻译（此.$refs.square，（）=>{
这是。$router.push（'compressore'）
})
}
...

及

导出函数转换（元素，回调）{ 动画({ 目标：要素， translateX:500， 完成：回调 }) } 我创建了一个示例

在本例中，我还通过使用Vue内置的

transition

在页面之间进行转换来使用页面转换。请参阅和。

您可以使用回调等待动画完成

现在，您的代码可能如下所示：

。。。
去（）{
翻译（此.$refs.square，（）=>{
这是。$router.push（'compressore'）
})
}
...

及

导出函数转换（元素，回调）{ 动画({ 目标：要素， translateX:500， 完成：回调 }) } 我创建了一个示例

---

在本例中，我还通过使用Vue内置的

transition

在页面之间进行转换来使用页面转换。请参阅和。

您可以侦听事件

传递，然后更改路线。您可以侦听事件
传递，然后更改路线。