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

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);
}

组件显示，路由切换-过渡动画相关推荐

jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
vue-router组件重用路由切换时的问题
当一个组件被重用时,切换路由,该组件不会被销毁.该组件的created也不会被调用,如果在created中有获取数据的操作,切换路由后,就不会再获取新的数据了,界面上就没有刷新. 其实官方文档就有解决 ...
React过渡动画组件
文章目录 1. 基础使用 2. 将animate.css集成到csstranistion中 3. 列表过渡 4. switchTransition动画 5. 路由切换过渡 6. 高阶组件实现路由切换过 ...
Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
vue 路由切换动画（滑入，滑出效果）
最近做的一个小项目,需要做路由切换,页面滑入滑出的效果,总结下实现的思路和方法. router-view 用 transition 标签包裹 router-view 组件,动态添加动画名,data 里 ...
android过渡动画旋转,炫酷的Android过渡动画
[桃花潭水深千尺,不及汪伦送我情] 不知道大家有没有发现,Android版的掘金有下面这个小小动画:点击作者头像跳转到作者的详情页,而作者头像会从当前界面通过动画过渡详情页界面. image 知识贫乏 ...
Android 过渡动画
标注过渡动画最好都在Activity之间实现 Android 的过渡动画可以分为四个部分: Activity/Fragment 切换时的内容过渡动画(content transition) Acti ...
Android过渡动画，发现掘金小秘密
android:gravity="center" android:transitionName="textTransform" android:text=&qu ...
给React-Router添加路由页面切换时的过渡动画
PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过Vue2的同学们应该都知道<transition>这个内置组件, ...

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

组件显示，路由切换-过渡动画相关推荐

最新文章

热门文章