@hbwow/router-animation
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

@hbwow/router-animation

一个对路由切换时的页面动画。

使用

安装

npm i @hbwow/router-animation
#or
yarn add @hbwow/router-animation
#or
pnpm add @hbwow/router-animation

Demo

import { Outlet, useLocation, useNavigationType } from 'react-router-dom';

const location = useLocation();
const action = useNavigationType();

<Layout>
  <RouterAnimation
    routerAnimationMode={routerAnimationMode}
    action={action}
    motionKey={location.pathname}
  >
    <div>
      <Outlet />
    </div>
  </RouterAnimation>
</Layout>;

API

参数 说明 类型 默认值 版本
routerAnimationMode 动画效果 IRouterAnimationMode 'fade' 0.0.1
action 当前的导航类型或用户如何到达当前页面;通过历史堆栈上的弹出、推送或替换操作 IAction 'PUSH' 0.0.1
motionProps framer-motion其余参数 MotionProps {} 0.0.1
motionKey 用于告诉 motion 刷新 React.Key - 0.0.1

IRouterAnimationMode

参数 说明
fade 褪色
slide 幻灯片
slide-x 幻灯片(X方向)
none -

IAction

参数 说明
POP 弹出
PUSH 推送
REPLACE 替换

Package Sidebar

Install

npm i @hbwow/router-animation

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

151 kB

Total Files

21

Last publish

Collaborators

  • hbwow