Question

在对该主题进行了大量研究之后，我试图弄清楚如何使用Vue / Nuxt实现类似于BarbaJS的页面转换。

我的目标是在例如项目组合项目的动态过渡时更改URL。因此，有点像扩展的网格布局，该布局在单击时也会更改URL。以下两个网站就是我要实现的目标示例：

https://strakzat.com/
https://infinum.co

第一个网站实际上使用BarbaJS，但是第二个网站仅使用pushState来实现所需的效果。当您单击其工作示例时，project元素会随着URL的更改将效果扩展到新页面。

我确实知道使用Vue / Nuxt可以轻松得多，但是我似乎无法弄清楚在正在进行的测试项目中该如何做。在Nuxt中，我的假设是结合使用页面过渡和中间件，它们将在过渡期间“捕获”数据，然后路由器将负责URL更改。但是话又说回来，也许比这更简单。

任何想法或帮助将不胜感激。

Answer 1

如果您将VueJS项目实现为单页应用程序或SPA。您可能会使用vue-router。

Vue-router在他们的documentation中说明了当您从一页导航到另一页时如何添加过渡。就像下面的示例一样，只需用<router-view>将<transition>组件包装起来即可。

<transition>
    <router-view></router-view>
</transition>

Answer 2

对于未来的Googler。只需将它们添加到布局的默认.vue中即可。

<style>


.page-enter-active {
  transition: all 0.25s ease-out;
}

.page-leave-active {
  transition: all 0.5s ease-in;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}
</style>

仅此而已。继续尝试以取得理想的效果。

Answer 3

萨拉（Sarah Drasner）有一篇很棒的文章here，其中介绍了如何使用简单的CSS转换或使用GSAP之类的更复杂的转换来做到这一点。

Vue / NuxtJS中类似BarbaJS的页面过渡

3 个答案: