react路由动画

下载一个

npm i react-transition-group

第一步：在文件中引入

import {CssTransition,SwitchTransition} from 'react-transtion-group'

第二步：将原先的占位符outlet改为useoutlet

import { NavLink,useLocation,useoutlet } from 'react-router-dom'



export default function App(){

                const currentoutlet = useoutlet();

                const location = useLocation();

                return(

                        <>     

                                占位符部分

                                <switchTransition>

                                        <cssTransition key={ location.pathname } timeout={1000}                                         className="page">

                                                {

                                                        ()=>(

                                                                      <div className="fade">{ currentOutlet }</div>

                                                         )

                                                }

                                        </cssTransition>

                                </switchTransition>

                        </>

}

第三步：在文件中引入css样式  import './css/app.css'   css文件内写动画效果

fade是占位符的className标签例：

.fade-enter{

                opacity:0;

                transform:scale(1.1);

        }

        .fade-enter-active{

                opacity:1;

                transform:scale(1);

                transition:opacity 300 ms,transform 300ms

        }

        .fade-exit{  ......  }

        .fade-exit-active{  ......  }