Vue 多层弹出框滑出效果如何是实现

Question

作为一个vue小白的我，真的是绞尽脑汁，实在是不知道如何解决，请大佬看看，

需求：

1. 在父组件页面有按钮，点击之后第一层页面从右侧滑出。
2. 弹出框内有表格，可以点击查看详情，详情页从右侧滑出，而表格页左滑，详情页有后退的按钮，可以回到表格列表页。
3. 每个页面都有关闭按钮，可以直接关闭页面。
4. 后退和关闭按钮都是从左侧滑出，和滑入的效果正好相反。
5. 每个页面都有tab页。

附图：

在不懈的百度和挖掘脑细胞的情况下，尝试了几种方法，路由的方法可以实现第一层页面弹出，但是弹出层的关闭按钮，让弹出页面也从左向右滑出隐藏这种效果一直没实现。。

组件的方法，我还没试，主要是我考虑到弹出框的内容体量很大，做成组件会很消耗页面内容，也不知道我考虑的对不对。。

大佬们可以看看嘛~~~