前幾天，我在推特上看到這樣一張圖。

原來地址欄還能這么玩，瞬間就覺得自己弱爆了。然后我決定去實現一下這個效果，然后做成一個庫。

畫了一個晚上，終于做好了。這是最后的成果。

這個庫使用非常的簡單。

你只需要，

yarn add animate-uri

然后

import { animateUriFactory, bindAllLink } from 'animate-uri'animateUriFactory({ duration: 60, shouldPushState: false }).start('/hello-world','/', )

這樣就是一個簡單的過渡效果了。

玩玩可沒有意思，在項目中使用才有意思。

接下來我們在 Next.js 項目中加入一個好玩的東西。

在 nextjs 中的自定義 _app.tsx 中加入如下，監聽路由變化。

import { animateUriFactory } from 'animate-uri/publish/index.esm' const animateInstance = animateUriFactory()// componentDidMount(): void { Router.events.on('routeChangeStart', (url) => {animateInstance?.start(url) })Router.events.on('routeChangeComplete', () => {animateInstance?.stop() })// }

大功告成。

隨便偷偷說一下倉庫地址：

animate-uri?github.com

總結

以上是生活随笔為你收集整理的js修改地址栏url_不同寻常的地址栏过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。