Vue如何结合Animate.css实现Tab标签页的动态路由转场动画效果？

本文共计1947个文字，预计阅读时间需要8分钟。

类似浏览器窗口的路由切换逻辑，看似复杂，实则由简单的元素拼接而成，这个功能也并不例外。本篇主要描述两个‘类似’的功能。

类似于浏览器窗口一样的路由切换逻辑，看着还是挺高大上的，本以为有很多高级的玩意儿，奈何复杂的东西总是由简单的东西拼接而成的，这个功能也不例外。

本篇文章主要描述两个问题：

如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画。

该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css

效果如下：

Tab标签页实现

首先是该组件的模板部分， ContextMenu 组件是我们自定义的右键菜单，后面会说到。 a-tabs 组件则是 ant 的组件，具体用法不详述，可以查看官方文档。还有一个 PageToggleTransition 组件，是我们用来实现动画切换的组件，非常简单。