Question

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

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

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

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

非常感谢您的帮助

Answer 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

Nuxt过渡不适用于不同布局

1 个答案: