不同寻常的地址栏过渡

Innei

发布于 2021-12-28 11:12:26

1K0

文章被收录于专栏：静之森静之森

前几天，我在推特上看到这样一张图。

原来地址栏还能这么玩，瞬间就觉得自己弱爆了。然后我决定去实现一下这个效果，然后做成一个库。

花了一个晚上，终于做好了。这是最后的成果。

这个库使用非常的简单。

你只需要，

sh

1yarn add animate-uri

COPY

然后

js

1import { animateUriFactory, bindAllLink } from 'animate-uri'
2
3animateUriFactory({ duration: 60, shouldPushState: false }).start(
4  '/hello-world',
5  '/',
6)

COPY

这样就是一个简单的过渡效果了。

玩玩可没有意思，在项目中使用才有意思。

接下来我们在 Next.js 项目中加入一个好玩的东西。

在 nextjs 中的自定义 _app.tsx 中加入如下，监听路由变化。

tsx

1import { animateUriFactory } from 'animate-uri/publish/index.esm'
2const animateInstance = animateUriFactory()
3
4// componentDidMount(): void {
5Router.events.on('routeChangeStart', (url) => {
6  animateInstance?.start(url)
7})
8
9Router.events.on('routeChangeComplete', () => {
10  animateInstance?.stop()
11})
12
13// }

COPY

大功告成。

随便偷偷说一下仓库地址：

animate-uri

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-15，如有侵权请联系 cloudcommunity@tencent.com 删除

app