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

Question

我正在为我的新网站使用 Nuxt，我创建了一个 CSS 带有 page-enter-active class 的转换，但它只在基于默认布局的页面上工作。

问题的简单演示：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 将两者分开是因为页面转换更精细，并且可能需要在共享页面布局之间进行更具体的主体调整。由于布局转换发生在 higher/parent 级别而不是页面，因此页面转换取决于它们的行为。

更新为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 过渡不适用于不同的布局

Nuxt transition not working on diffents layouts

javascript

vue.js

nuxt.js