react路由动画切换
1.react过渡效果
1.1 在react项目中下载安装过渡动画模块
cnpm install react-transition-group --save
1.2 在需要执行过渡的组件中导入动画模块
import { CSSTransition } from 'react-transition-group' // 导入css动画的组件模块
1.3 在需要过渡的标签外层添加CSSTranstion组件
<CSSTransition in={bool} timeout={2000} classNames="animate"><h1>这是动态显示的标签或组件</h1>
</CSSTransition>
使用动画的写法 CSSTransition 需要设置三个属性:
in: 控制子元素显示隐藏的条件,一般是bool值或表达式
timeout: 入场或出场动画的时间,单位默认毫秒
className: 入场或出场class属性名前缀
1.4 在组建的css中通过class设置入场和出场动画
有两个过程,总共六个样式:
.animate-enter .animate-enter-active .animate-enter-done
.animate-exit .animate-exit-active .animate-exit-done
/* 入场动画过程 */
.animate-enter{opacity: 0;transform: translateY(300px);
}
.animate-enter-active{transition: 2s;opacity: 1;transform: translateY(0px);
}
.animate-enter-done{opacity: 1;transform: translateY(0px);
}
/* 出场动画过程 */
.animate-exit{opacity: 1;transform: translateY(0px);
}
.animate-exit-active{transition: 2s;opacity: 0;transform: translateY(300px);
}
.animate-exit-done{opacity: 0;transform: translateY(300px);
}
注意:
1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒
2, 需要在src/index.js中关闭严格模式<React.StrictMode>或删除
3, enter-active和exit-active中要写 过渡结束状态 才有效
4, 动画样式写完后,要导入需要执行过渡的组件中才能生效
import "./Animate.css" // 导入动画样式
2.react路由切换动画
2.1 在react项目中下载安装过渡动画模块
cnpm install react-transition-group --save
2.2 在路由配置文件/src/router/index.js中导入动画组件
import { TransitionGroup, CSSTransition } from 'react-transition-group'
2.3 在路由组件模板中,用动画组件包裹路由组件
<TransitionGroup><CSSTransition timeout={2000} className="dg" unmountOnExit key={props.location.pathname}><Switch location={props.location}><Route exact path="/animate" component={Animate}/></Switch></CSSTransition>
</TransitionGroup>
注意:CSSTransition组件的key属性值要保证唯一性,所以用location.pathname
Switch组件要设置location属性为路由信息的props.location,保证路由跳转组件的key和CSSTransition的key一致
2.4 路由组件中没有路由信息location.pathname, 需要使用withRouter导入
import { withRouter } from 'react-router-dom'
export default withRouter(MyRouter)
2.5 在组件的css文件中写路由切换动画过程
/* 入场动画过程 */
.dg-enter{transform: translateX(200px)
}
.dg-enter-active{transition: 2s;transform: translateX(0px)
}
.dg-enter-done{transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{transform: translateX(0px)
}
.dg-exit-active{transition: 2s;transform: translateX(200px)
}
.dg-exit-done{transform: translateX(200px)
}.home, .user, .login, .animate{position: absolute;left: calc(50% - 200px)
}
react路由动画切换相关推荐
- react路由动画切换(react 路由动画)
1.react过渡效果 1.1 在react项目中下载安装过渡动画模块 cnpm install react-transition-group --save 1.2 在需要执行过渡的组件中导入动画模块 ...
- [react] 路由切换时同一组件无法重新渲染的有什么方法可以解决?
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决? componentWillReceiveProps 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
- Vue router-view 路由无缝切换动画
Vue router-view 路由无缝切换动画,左滑淡出,右滑淡入. HTML: <div class="wrap"><transition mode=&quo ...
- RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- rn php,RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- React过渡动画组件
文章目录 1. 基础使用 2. 将animate.css集成到csstranistion中 3. 列表过渡 4. switchTransition动画 5. 路由切换过渡 6. 高阶组件实现路由切换过 ...
- html做app的切换效果,Vue-router结合transition实现app动画切换效果实例分享
本文主要为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. ...
- 18. React路由
文章目录 1.React路由相关概念 1.1 SPA应用 1.2 路由Route的理解 1.2.1 什么是路由 1.2.2 路由Route的分类 后端路由 前端路由 1.3 react-router- ...
- React 路由react-router-dom详解
React 路由react-router-dom详解 ( 路由嵌套 + 路由传参 + 路由权限 + 路由优化 按需导入 + 404页面 ) 前面我们先了解一下 路由是什么? 路由分类有哪些?内置API ...
- Vue路由和React路由
Vue路由 注意:随着版本更新,vue版本需要对应合适的vue-router版本才能正常工作,比如这里当我安装vue-router时, npm install vue-router 它默认安装的版本是 ...
最新文章
- python excel web_使用python在WEB页面上生成EXCEL文件
- TIANCHI-全球城市计算挑战赛-完整方案及关键代码分享(季军)
- 浏览器登陆时纪录自动登陆时限
- 技术分享:什么是CDN鉴权(by光网烈火)
- Jquery ajax提交表单几种方法详解
- P5303 [GXOI/GZOI2019]逼死强迫症(斐波拉契、矩阵乘法)
- python分类预测降低准确率_十分钟掌握python机器学习特征选择
- mysql dump工具升级_MySQL数据库升级
- CVPR 2022 中科院、腾讯提出LAS-AT,利用“可学习攻击策略”进行“对抗训练”
- 智能一代云平台(六):移动开发之Ionic研究
- flash实用工具类+开源包收藏
- ubuntu 14.04中安装Jenkins
- Odoo12功能模块文档整理
- 苹果开发者账号注册、管理注意事项
- Linux操作系统管理-Resource temporarily unavailable
- RGB/YUV/YIQ 颜色空间
- linux怎么保存7天内文件,Linux七天系列(第七天)—文件系统管理
- [论文分享] Stegozoa: Enhancing WebRTC Covert Channels with Video Steganography for Internet Censorship
- 纽约州立计算机科学,SBU的CS「纽约州立大学石溪分校计算机科学专业」
- 在 Linux 下用 CMAKE 编译安装 OpenCV 3.2.0
热门文章
- 常见网站挂马方式 网站挂马可利用漏洞 网站加密挂马
- 计算机中带符号的整数表示方法,带符号数的代码表示-数字电子技术-电子发烧友网站...
- Echarts 2dMap阴影,多个map分层现象以及飞线飞机航线
- 使用 f2py 包装 Fortran MPI 程序
- arcgis符号库匹配不对的原因_ArcGIS符号库自动匹配方法
- 8小时学会div+css 视频教程
- 神经网络和深度学习-习题
- 微生物组-扩增子16S分析和可视化(2022.7)
- 总体均值的区间估计和习题
- 计算机课word实验总结,大学计算机操作实践报告【实验8】Word2010综合实验