1

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

我的目标是在动态转换时更改 URL，例如，投资组合项目。所以，有点像一个扩展的网格布局，点击时也会改变 URL。我正在尝试实现的示例在以下两个网站上：

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

第一个网站实际上使用了 BarbaJS，但第二个网站只是使用 pushState 来达到预期的效果。当您单击他们的工作示例时，项目元素会在新页面中产生扩展效果，同时 URL 也会发生变化。

我确实知道使用 Vue/Nuxt 实现这一点要简单得多，但我似乎无法弄清楚我将如何在我正在处理的测试项目中进行它。在 Nuxt 中，我的假设是使用页面转换和中间件的组合，它会在转换时“捕获”数据，然后路由器会处理 URL 更改。但话又说回来，也许它比这更简单。

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

4

3 回答 3

0

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

Vue-router在他们的文档中解释了当你从一个页面导航到另一个页面时如何添加一个过渡。就像用下面的示例包装<router-view>组件一样简单<transition>：

<transition>
    <router-view></router-view>
</transition>
于 2018-07-07T18:44:01.670 回答
0

Sarah Drasner在这里有一篇很棒的文章，解释了如何使用简单的 CSS 转换或使用 GSAP 等库进行更复杂的转换。

于 2020-11-30T11:30:51.707 回答
0

对于未来的谷歌人。只需将这些添加到布局中的默认 .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>

就这样。继续尝试它以获得所需的效果。

于 2019-06-26T04:01:29.650 回答