Nuxt 过渡不适用于不同的布局答案

【问题标题】：Nuxt transition not working on diffents layoutsNuxt 过渡不适用于不同的布局
【发布时间】：2019-02-21 11:45:11
【问题描述】：

我正在为我的新网站使用 Nuxt，并使用 page-enter-active 类创建 CSS 过渡，但它仅适用于基于默认布局的页面。

问题的简单演示：https://test-transition-layout.netlify.com/

从或到主页浏览时（基于不同的布局），没有过渡。但是，如果您从团队页面导航到 about，则可以看到它。

演示代码：https://github.com/KevinFuret/test-template-transition

非常感谢您的帮助

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

你非常接近！您所缺少的只是 CSS (https://nuxtjs.org/api/configuration-transition#the-layouttransition-property) 中的 layoutTransitions 类。

Nuxt 将两者分开，因为页面转换更加精细，并且可能需要在共享页面布局之间进行更具体的正文调整。由于布局转换发生在比页面更高/父级别，因此页面转换取决于它们的行为。

更新到assets/main.css

.page-enter-active,
.page-leave-active,
.layout-enter-active, 
.layout-leave-active {
  transition: opacity .5s
}

.page-enter,
.page-leave-active,
.layout-enter, 
.layout-leave-active {
  opacity: 0
}

演示： https://kevinfuret-test-template-transition.glitch.me/

来源： https://glitch.com/edit/#!/kevinfuret-test-template-transition

【讨论】：

非常感谢您的帮助！