Vue/NuxtJS中类BarbaJS的页面过渡

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中解释了如何在从一个页面导航到另一个页面时添加过渡。它就像用<transition>包装<router-view>组件一样简单，就像下面的例子一样：

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

Answer 2

给未来的谷歌人。只需在布局中的默认.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，它解释了如何使用像GSAP这样的库来实现简单的CSS转换或者更复杂的转换。