如何用Vue和Animate.css实现带转场动画的Tab标签路由效果？

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

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

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

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

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

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

效果如下：

Tab标签页实现

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