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

时间:2019-08-11 10:02:17

标签: vue.js transition nuxt.js nuxt

我在nuxt中进行了以下设置

  • page / blog / index.vue
  • components / topheader.vue

当您离开页面并在组件顶部标题中输入页面时,我希望具有过渡效果。标题应淡入/淡出。这是因为现在标题很突然地被替换而没有过渡效果。

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

我查看了nuxt.conf过渡中的设置。但这是针对页面过渡的,仅对整个页面有影响。似乎我无法仅在其中定位目标。我的感觉是我应该可以在那里进行一些设置。但是我想念一些东西。

为了显示过渡,我可以使用...

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

提前

1 个答案:

答案 0 :(得分:0)

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

在CSS中:

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