admin管理员组文章数量:1634331
安装
npm install @types/react-transition-group react-transition-group --save
import { CSSTransition,TransitionGroup} from ‘react-transition-group’
目录结构
引入的话,是根据你想生成动画具体文件
我这边是在Layout,里面的Outlet加的动画,具体根据自己实际情况
- src>routers>index.tsx下新增路由配置文件
export const routers: RouteObject[] = [
{
path: '/',
element: <AntLayout />,
children: [
{
index: true,// 默认加载当前子项
element: lazyLoad(<Home />)
},
{
path: '/form/addform',
element: lazyLoad(<AddForm />)
},
{
path: '/form/watchform',
element: lazyLoad(<WatchForm />)
}
],
},
{
path: '/login',
element: lazyLoad(<Login />)
}
]
启用懒加载
const lazyLoad = (children: ReactNode): ReactNode => {
return (
<Suspense >
{children}
</Suspense>
)
}
- App.tsx 引入配置好的路由
import { useRoutes } from 'react-router-dom';
import { routers } from './routers';
import React from 'react';
import './App.scss'
const App: React.FC = () => {
return useRoutes(routers)
};
export default App;
- 入口文件index.tsx 选择哈希还是history模式
这里注意一点,react严格模式在使用过渡动画会抛错,这里就把严格模式删了
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<Router>
<App />
</Router>
);
reportWebVitals();
- 最后是在顶级文件AntLayout.tsx中引入过渡动画插件
我这里是用的ant-design Layout Menu组件,官网有示例代码直接copy
过渡动画只需要加在路由出口位置,目前v6的Outlet同vue router-view相同用法。
SwitchTransition搭配CSSTransition使用
SwitchTransition模式有两种out-in | in-out,
<Content style={{ padding: 24, margin: 0, flexGrow: 1, overflow: 'auto' }}>
<Breadcrumb separator=">" style={{ fontSize: 14, marginBottom: 20 }}>{finalCrumbItems}</Breadcrumb>
<SwitchTransition mode="out-in">
<CSSTransition key={location.key} timeout={300} classNames="fade" nodeRef={null}>
<Outlet />
</CSSTransition>
</SwitchTransition>
</Content>
完整一点代码
const AntLayout: React.FC = () => {
const [collapsed, setCollapsed] = useState(false)
const navigate = useNavigate()
const location = useLocation()
const pathSnippets = location.pathname.split('/').filter(i => i)
const breadCrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
return (
<Breadcrumb.Item key={url}>
<Link to={url}>{pathMaps[url]}</Link>
</Breadcrumb.Item>
)
})
const finalCrumbItems = [
<Breadcrumb.Item key="/">
<Link to="/">首页</Link>
</Breadcrumb.Item>
].concat(breadCrumbItems)
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider
collapsible
collapsed={collapsed}
onCollapse={value => setCollapsed(value)}>
<div className="logo"></div>
<Menu
theme="dark"
defaultSelectedKeys={['1']}
mode="inline"
onClick={handleMenuClick}
onSelect={({ key }) => navigate(key)}
items={items} />
</Sider>
<Layout style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
<Header>
欢迎来到缅北诈骗系统
</Header>
<Content style={{ padding: 24, margin: 0, flexGrow: 1, overflow: 'auto' }}>
<Breadcrumb separator=">" style={{ fontSize: 14, marginBottom: 20 }}>{finalCrumbItems}</Breadcrumb>
<SwitchTransition mode="out-in">
<CSSTransition key={location.key} timeout={300} classNames="fade" nodeRef={null}>
<Outlet />
</CSSTransition>
</SwitchTransition>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design @2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
)
}
过渡动画的样式
.fade-exit {
opacity: 0;
transform: translateX(50px);
}
.fade-exit-active {
opacity: 1;
transform: translateX(0%);
}
.fade-enter-active,
.fade-exit-active {
transition: all 300ms;
}
参考官网样式: 过渡动画.
效果
总结
目前只是把这个动画简单实现下,仅供学习参考,还有些问题比如出现滚动条还是没解决。
版权声明:本文标题:react react-router V6 路由切换实现过渡动画 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729177276a1188877.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论