离开页面时组件中的NUXT VUE过渡

Question

我在 nuxt 中进行了以下设置

• 页面/博客/index.vue
• components/topheader.vue

我想在你离开页面并在组件顶部标题中进入页面时具有过渡效果。标题应该淡入/淡出。这是因为现在标题被替换得很突然，没有过渡效果。

问题是当您转到新页面/路线时，动画没有时间继续前进。因此，我在使用 beforeRouteLeave 停止路由器方面取得了一些成功，然后将道具“showTitle”传递给将其设置为 false 的组件。在 beforeLeave 中的 next() 上设置超时 ... 但这感觉非常错误和不好的做法

我查看了 nuxt.conf 转换中的设置。但这是针对页面转换的，仅对整个页面有影响。看来我不能只在那里定位组件中的某些东西。我的感觉是我应该能够通过那里的一些设置来做到这一点。但是我错过了一些东西。

为了出现过渡，我可以使用...

现在我的问题。如何定位页面组件中的某些内容以在离开页面时创建过渡。理想情况下，加载已经开始，因此转换大约需要页面加载之间的时间。

提前谢谢

Answer 1

您可以使用<transition name="yourTransitionName"></transition> 标签包装您的组件。

在 CSS 中：

.yourTransitionName-leave-active { /* your code */ }