Nuxt过渡不适用于差异布局

Question

我将Nuxt用于新网站，并使用pageenter-active类创建CSS过渡，但它仅在基于默认布局的页面上工作。

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

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

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

非常感谢你的帮助

Answer 1

你很亲密！您所缺少的只是CSS中的layoutTransitions类（https://nuxtjs.org/api/configuration-transition#the-layouttransition-property）。

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