前几天，我在推特上看到这样一张图。
ezgif-6-2b27134bbba1
原来地址栏还能这么玩，瞬间就觉得自己弱爆了。然后我决定去实现一下这个效果，然后做成一个库。
花了一个晚上，终于做好了。这是最后的成果。
2020-08-1519.20.53
这个库使用非常的简单。
你只需要，
1yarn add animate-uri
Copy
然后
1import { animateUriFactory, bindAllLink } from 'animate-uri'
2
3animateUriFactory({ duration: 60, shouldPushState: false }).start(
4  '/hello-world',
5  '/',
6)
Copy
这样就是一个简单的过渡效果了。
玩玩可没有意思，在项目中使用才有意思。
接下来我们在 Next.js 项目中加入一个好玩的东西。
在 nextjs 中的自定义 _app.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
https://github.com/Innei/animate-uri

文章标题:

文章链接: [复制]

最后修改时间:

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

亲亲留个评论再走呗

0
0
0
0
正在加载评论区...