组件显示，路由切换-过渡动画

1.安装过渡动画模块npm install react-transition-group --save;

2.在需要执行过渡的组件中导入动画模块;

import{ CSSTransition } from "react-transition-group"

3.在需要过渡的标签外层添加CSSTranstion组件

        <CSSTransition in={bool} timeout={2000} classNames = "myFade">

                <div></div>

        </CSSTransition>

4.在组件的css中通过class设置入场和出场动画

            .myfade-enter  .myfade-enter-active   .myfade-enter-done

            .myfade-exit  .myfade-exit-active   .myfade-exit-done

入场和出场的class样式要按顺序写，动画开始和结束的顺序不能颠倒;

需要在index.js中关闭严格模式，删除<React.StrictMode>

enter-active和exit-active中要写过渡结束状态才有效;

 1.组件显示切换 添加过渡动画

// 函数式组件
import Star from '../../components/Star/Star';
import { useState,useEffect } from 'react';
import {CSSTransition} from 'react-transition-group';
import './Find.css'
function Find() {
    // 定义函数式组件的状态和修改函数及初始值
    let [age,setAge] = useState(19);

    let [arr,setArr] = useState([]);
    let [show,setShow] = useState(true);
    return ( 
        <div className='Find'>
            发现
            <hr />
            <button onClick={()=>{setShow(!show)}}>点击显示或者隐藏组件</button>
            {/* in属性式控制显示和隐藏的字段 timeout是要与过渡动画的一个时长保持一致 className 动画效果的类*/}
            <CSSTransition in={show} timeout={2000} classNames='ani'>
                <Star age={age} ageFun={setAge}></Star>
            </CSSTransition>
        </div>
     );
}

export default Find;

/* 入场开始时 */
.ani-enter{
    transform: translateX(-100vw);
}
/* 入场进行时 transition设置的时间最好与CSSTransition的timeout属性设置的值一样，也可以比哪个小
    把最终的状态添加ani-enter-active和ani-enter-done这两个类
*/
.ani-enter-active{
    transition: 1s;
    transform: translateX(0);
}
/* 入场结束时 */
.ani-enter-done{
    transform: translateX(0);
}
/* 离场动画过程 
    离场开始时 */
.ani-exit{
    transform: translateY(0);
}
/* 入场进行时 transition设置的时间最好与CSSTransition的timeout属性设置的值一样，也可以比哪个小
    把最终的状态添加ani-enter-active和ani-enter-done这两个类
*/
.ani-exit-active{
    transition: 1s;
    transform: translateY(100vh);
}
/* 入场结束时 */
.ani-exit-done{
    transform: translateY(100vh);
}
.Find{
    background-color: aqua;
    height: 100vh;
}

去index.js中将严格模式注释掉；

// <React.StrictMode>
    // 在app外加上Router就相当于vue在入口文件注入全局路由器 
    <Router>
      <App />
    </Router>
  // </React.StrictMode> 

2.给前端路由界面切换添加过渡动画

如何获取路由对象信息呢：

1.在函数式组件通过hookApi进行获取;

 import {useLocation,Navigate} from "react-router-dom"

 useLocation 获取路由信息对象

Navigate 用来跳转的

// 1.设置路由的模式:历史模式或者哈希模式：BrowserRouter
// 2.设置页面的配置信息的组件,Router组件等同于vue当中路由页面对象;
// as 生成一个别名 ,别名为Router
//  Routes 组件包括所有Route组件 类似vue数组结构，包含所有的单个组件对象
// NavLink 跳转的组件 类似与vue中router link
// 没有routerVIew ,react中把路由文件index.js导出来就是路由的出口容器,类似与router-view
import { BrowserRouter as Router, Route, Routes,useLocation,Navigate } from "react-router-dom";
// 导入页面
import Find from "../pages/Find/Find";
// 组件
import Home from "../pages/Home/Home.jsx";
import Page404 from "../pages/Page404/Page404.jsx";

import './index.css';

// 1.导入需要的组件 CSSTransition 过渡组件 TransitionGroup 动画组
import { CSSTransition, TransitionGroup } from "react-transition-group";

// 导出路由组件 作为页面的出口组件
export default function Index() {
    const location = useLocation(); //获取路由信息;
    console.log(location)
    return (
        <div>
            {/* 2添加动画组 */}
            <TransitionGroup>
                {/* 3添加动画效果组件 unmountOnExit是离开的时候组件卸载 key属性控制在不同的路由界面的显示和隐藏*/}
                <CSSTransition timeout={1000} unmountOnExit classNames='index_ani' key={location.pathname}>
                    <Routes location={location}>
                        {/* path：路由地址  element对应的式路由页面*/}
                        <Route path="/" element={<Home />}></Route>
                        <Route path="/find" element={<Find />}></Route>
                        {/* 重定向 */}
                        <Route path="/abc" element={<Navigate to='/' replace/>}></Route>

                        {/* 404界面，所有的路由界面都能匹配的界面 */}
                        <Route path="*" element={<Page404 />}></Route>
                    </Routes>
                </CSSTransition>
            </TransitionGroup>
        </div>
    )
};

 

/* 入场开始时 */
.index_ani-enter{
    transform: translateX(-100vw) ;
}
/* 入场进行时 transition设置的时间最好与CSSTransition的timeout属性设置的值一样，也可以比哪个小
    把最终的状态添加index_index_ani-enter-active和index_ani-enter-done这两个类
*/
.index_ani-enter-active{
    transition: 1s;
    transform: translateX(0);
}
/* 入场结束时 */
.index_ani-enter-done{
    transform: translateX(0);
    opacity: 1;
}
/* 离场动画过程 
    离场开始时 */
.index_ani-exit{
    transform: translateX(0);
}
/* 入场进行时 transition设置的时间最好与CSSTransition的timeout属性设置的值一样，也可以比哪个小
    把最终的状态添加index_ani-enter-active和index_ani-enter-done这两个类
*/
.index_ani-exit-active{
    transition: 1s;
    transform: translateX(100vw);
}
/* 入场结束时 */
.index_ani-exit-done{
    transform: translateX(100vw);
}