Nuxt转换不适用于不同的布局

Question

我正在使用Nuxt作为我的新网站，我使用page-enter-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
}

但是：ぁzxswい

资料来源：https://kevinfuret-test-template-transition.glitch.me/