Nuxt.js 中特定布局的自定义过渡

Question

在我的 Nuxt.js 应用程序中，我的嵌套路由之一的布局与页面其余部分完全不同。为了使过渡不那么刺耳，我想仅将自定义过渡应用于此页面/布局。这是一种组合的缩放/淡入淡出动画，有点像 Windows 10 中的窗口，因此看起来新页面是在旧页面之上打开的。一旦打开过渡完成，旧页面就会从 DOM 中删除，因为它是一个过渡。退出显然是相反的，进入页面被加载到退出页面下方，然后播放退出过渡，给人一种页面正在关闭在一直存在的页面顶部的错觉。

我通过将顶层包装<router-view />在过渡元素中并仅在该特殊页面（作用域）上指定过渡 CSS，使此设置在普通 Vue 应用程序中工作。

对于 Nuxt，我无法让它像那样工作。我在我的中设置了布局过渡nuxt.config.js：

layoutTransition: {
  name: "layout",
  mode: "in-out",
},

如果我全局设置过渡 CSS，我会在每个页面上得到效果（显然），这是我不想要的。如果我将其范围设置为目标布局，则它根本不起作用。

我能想到但我不喜欢的解决方法：

1) 放弃布局系统，对所有页面使用一种布局，然后使用标准页面转换。我不喜欢它，因为据我所知，这意味着在每个页面上手动定义布局。这会导致大量的重复代码和尴尬的代码结构，这只是自找麻烦。我将不得不经常与 Nuxt 的自动路由作斗争，但我不想这样做，因为我喜欢自动路由。

1b）当然，我也可以提出一个布局组件，并将整个网站内容作为插槽传递给该组件，这将使布局更容易且不易出错。这样我基本上就可以创建自己的布局系统并绕过 Nuxt 的布局系统。因此，我会更改整个站点的架构，添加样板并绕过框架的某些部分，以便在一个页面上进行一次转换。感觉有点矫枉过正了。

2) 使用实际的覆盖层而不是单独的页面。我不喜欢它，因为它没有映射到路线，因此无法为该页面添加书签或使用历史记录进行导航。此外，“下面”的页面可能有些复杂，因此出于性能原因，我不希望加载它（是的，我可以v-if删除它，使代码更加繁琐）。

3）只是不要使用过渡。到目前为止，它是整个网站上唯一的一个，因此至少没有过渡是一致的。然而，由于网站的其余部分非常统一，具有持久的页眉和页脚以及屏幕上的大量内容，并且“特殊”页面大部分是空的，只有一个文本编辑器以允许集中工作，因此这种过渡非常不和谐，您似乎已离开该网站。另外，当我已经在普通的 Vue 中使用它时（没有双关语），我不愿意接受答案是“这是不可能的”。

简而言之：我真的希望它能够正常工作，而不与 Nuxt 冲突或损害用户体验。有任何想法吗？