软件开发教程 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试
游戏开发 网络协议 系统运维 HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程
C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
 
   -> JavaScript知识库 -> react实现路由切换动画效果 -> 正文阅读

[JavaScript知识库]react实现路由切换动画效果

先看效果图

在这里插入图片描述
首先安装一下插件

yarn add  react-transition-group

把你需要有动画效果的页面用CSSTransition包裹起来

import { CSSTransition } from 'react-transition-group';
import { RouteComponentProps } from 'react-router-dom';

const Album: FC<RouteComponentProps> = ({
  history
}): ReactElement => {
  const [show, setShow] = useState<boolean>(true);
    /**
   * 返回上一个路由
   */
  const handleClickBack = useCallback((): void => {
    setShow(false);
  }, []);
    return (
    <CSSTransition
      in={show}
      timeout={300}
      appear={true}
      classNames="fly"
      unmountOnExit
      onExited={history.goBack}
    >
    <a onClick={handleClickBack}>返回</a>
    </CSSTransition>
    )
}
<CSSTransition>标签包裹需要设置动画的标签

1.in : 绑定控制动画效果切换的属性 this.state.show的值在truefalse之间切换来控制动画效果

2.timeout: 动画持续的时间

3.classNames : 动画的class名 与.css中样式类名一致

4.unmountOnExit : 动画出场即fade-exit-done样式效果结束后 直接将标签移除掉(若没有该属性 只是不显示标签 标签的位置任然占有)

5.onExited : 钩子函数 还有很多不同时刻的钩子函数 

6.appear : 值为true时 第一次显示标签是也有动画效果 需要在.css文件中设置相关样式

具体查看官网文档

  JavaScript知识库 最新文章
Vue2学习计划一:Vue初体验
Vue中路由表单缓存(keep-alive)
项目中的富文本编辑器该如何选择?
个人学习记录 - NodeJs Express 创建基础项
Vue开发笔记
typescript——前言和基础环境配置
Vue关于swiper轮播图组件的小细节
Vite创建Vue3.0项目
前端数据可视化之Echarts初体验
使用vue-route下的next({ ...to replace: t
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 12:34:11  更:2021-07-17 12:34:15 
 
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年7日历 -2021/7/27 4:33:53-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件开发教程