在React中通过react-transition-group使用过渡、动画,首先要有CSS3中的过渡和动画的相关知识储备,可以参考 过渡和2D变换动画和3d变换

我们自己通过css设置过渡、动画,需要给不同的class添加变化属性,比如位移、缩放大小或者旋转角度,再通过切换类名来达到动画的效果,那么在react-transition-group当中,仍然需要在不同的class上定义不同的css样式,简化的是,不需要我们再来进行判断切换类名,它规定了进入动画、退出动画分别的class后缀,我们只需要按照一定的规范去定义这些class即可。

可以看到class是有一个变化的过程的,当传入属性的值由true变成false时,即显示到隐藏,class的变化过程为 enter enter-active 及enter-done,传入属性的值由false变成true时,及隐藏到显示,class的变化过程为 exit exit-active和exit-done,知道react-transition-group的应用规律之后,再来看看它提供的主要API。

这样第三方的库,首先要做的事情就是安装 npm i react-transition-group --save

最常用的是CSSTransition,它提供了与css相关的变化,它提供了一些属性供我们使用

(1) in 传入boolean值,传入的是true代表开启 enter enter-active和enter-done的这一变化过程,传入false代码开启 exit exit-active exit-done这一过程  (必传)
 (2) timeout 表示执行时间,enter-active到enter-done 或者 exit-active到exit-done的执行时间 (必传)
 (3) classNames 定义添加的类名,这里定义的类名会被添加到 enter-xxx 及 exit-xxx 的之前
 (4) ummountOnExit 默认为false,表示当传入in的值为false值,CSSTransition中的元素不从dom中移除,传true时则会被移除

可以看到class在 enter / exit之前都增加了一个自定义的class属性box,以及当方块消失的时候,方块的dom元素被移除了,实现代码如下

// jsx代码
import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group'
import './style.css'; export default class CSSTransitionDemo extends Component {
constructor(props){
super(props);
this.state = {
isShow: true
}
} render(){
const { isShow } = this.state;
return(
<div className="simpleTransition">
<button onClick={()=>this.setState({isShow:!isShow})}>
当前状态:{isShow ? '显示' : '隐藏'}</button>
<CSSTransition in={isShow}
classNames="box"
timeout={1000}
unmountOnExit={true}>
<div className="helloBox">
hello
</div>
</CSSTransition>
</div>)
}
} // css代码
.box-enter {
opacity: 0;
transform: scale(0.6)
} .box-enter-active {
opacity: 1;
transform: scale(1);
transition: all 1000ms;
} .box-exit {
opacity: 1;
transform: scale(1);
} .box-exit-active {
opacity: 0;
transform: scale(.6);
transition: all 1000ms
}

(5) appear 定义首次加载的动画, 同时需要在css中添加对应的类名和样式, 可以与enter一致
 (6) 动画执行还有一些回调方法,需传入函数,函数有一个入参,参数为CSSTransition所包裹的元素
 onEnter、onEntering、onEntered、onExit、onExiting、onExited

实现代码如下

// jsx
<CSSTransition in={isShow}
classNames="box"
timeout={1000}
unmountOnExit={true}
appear
onEnter={ el=>console.log('开始进入',el)}
onEntering={ el => console.log('正在进入')}
onEntered={ el => console.log('进入完成')}
onExit={ el => console.log('开始退出')}
onExiting={ el => console.log('正在退出')}
onExited={ el => console.log('退出完成')}>
// ...
</CSSTransition> // css
.box-enter, .box-appear {
opacity: 0;
transform: scale(0.6)
} .box-enter-active, .box-appear-active {
opacity: 1;
transform: scale(1);
transition: all 1000ms;
}

这是最常用的CSSTransition,再来说说 SwitchTransition,SwitchTransition的作用就是切换展示的内容,有两种模式,分别是先隐藏旧内容再展示新的内容(out-in),先展示新内容再展示旧内容(in-out)

实现代码如下,需要CSSTransition配合使用,此时CSSTransition不需要定义in属性,因为in属性为false时就直接不展示整个元素了,此时需要定义不同的key来进行区分

// jsx
<SwitchTransition mode="out-in">
<CSSTransition key={isShow ? 'on' : 'off'}
classNames="btn"
timeout={1000}>
<button onClick={e=>this.setState({ isShow: !isShow })}>
{isShow ? 'on' : 'off'}
</button>
</CSSTransition>
</SwitchTransition> // css
.btn-enter {
opacity: 0;
transform: translateX(100%)
} .btn-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 1s, transform 1s
} .btn-exit {
opacity: 1;
transform: translateX(0)
} .btn-exit-active {
opacity: 0;
transform: translateX(-100%);
transition: opacity 1s, transform 1s;
}

还有一个是GroupTransition,用来给CSSTransition分组,当通过遍历来给元素添加 CSSTransition的动画时,需要再最外层增加 GroupTransition 才能添加上动画

实现代码如下

<TransitionGroup>
{this.state.movies.map((item, index)=>(
<CSSTransition key={item.id}
classNames="movie"
timeout={1000}>
<div>{item}</div>
</CSSTransition>
))}
<button onClick={e=>this.addMovies()}>添加电影</button>
</TransitionGroup>

对于遍历还要注意一点,本身react遍历数据时是希望我们加上唯一的key值,一方面是因为dom的diff算法进行比较时能够提高性能,另一方面,有时候没有key值会出现一些错误,比如像以下情况,逆序删除元素的时候,删除的是第一个元素,但是却给最后一个元素添加了动画

以上就是react-transition-group当中常用的三个组件,CSSTransition、SwitchTransition与TransitionGroup

react中使用动画 react-transition-group的更多相关文章

  1. 如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?

    React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segm ...

  2. react中使用动画

    1. css原生动画的使用 import React, { useState } from "react" import "./index.css" funct ...

  3. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. DIFF算法浅析(三)在react中的实现

    在虚拟dom中diff的实现. 分别从4个方面: DIFF抽象概念(概述.时间复杂性分析) 在Vue2中的实现(版本2.6.11.必要性.执行方式) 在React中的实现(版本16.13.1,必要性. ...

  5. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  6. react中如何使用动画效果

    在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...

  7. react中使用react-transition-group实现动画

    css动画的方式,比较局限,涉及到一些js动画的时候没法处理了.react-transition-group是react的第三方模块,借住这个模块可以更方便的实现更加复杂的动画效果 https://g ...

  8. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

  9. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  10. Three.js 快速上手以及在 React 中运用[转]

    https://juejin.im/post/5ca22692f265da30a53d6656 github 的地址 欢迎 star! 之前项目中用到了 3D 模型演示的问题,整理了一下之前学习总结以 ...

随机推荐

  1. boot-admin开源项目中有关后端参数校验的最佳实践

    我们在项目开发中,经常会对一些参数进行校验,比如非空校验.长度校验,以及定制的业务校验规则等,如果使用if/else语句来对请求的每一个参数一一校验,就会出现大量与业务逻辑无关的代码,繁重不堪且繁琐的 ...

  2. docker安装rabbitmq:management

    1.拉取镜像 docker pull rabbitmq:management 2.安装 docker run -dit --name rabitmq -e RABBITMQ_DEFAULT_USER= ...

  3. Spring Cloud开发实践(五): Consul - 服务注册的另一个选择

    目录 Spring Cloud开发实践(一): 简介和根模块 Spring Cloud开发实践(二): Eureka服务和接口定义 Spring Cloud开发实践(三): 接口实现和下游调用 Spr ...

  4. pyinstaller打包exe

    1.执行环境说明 python版本3.7直接使用pip进行安装pywin32.pyinstallerpip install pywin32pip install pyinstaller 2.使用了第三 ...

  5. 大幅提升前端工作效率!Numeral.js数值格式化库来了!

    我们日常开发中,时常会碰到数值格式化操作的场景,今天了不起就为大家分享一款相对比较全面的数值格式化的JS库:Numeral.js Numeral.js Numeral.js 是一个用来对数值进行操作和 ...

  6. Google Chrome 超详细使用教程

    由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文中的链接. 调查统计机构 NetMarketShare 发布最新的 7 月份报告,在全球浏览器市场,谷歌 ...

  7. Prism进入视图时导航的三种方式

    Prism导航 新建视图UserControl及其ViewModel,被跳转的视图的VM需要实现INavigationAware 在App.xaml.cs中注册视图及其ViewModel // App ...

  8. Python读取本地文件时出现错误UnicodeDecodeError

    Python读取本地文件时出现错误UnicodeDecodeError: 'gbk' codec can't decode byte 0x94 in position 5702: illegal mu ...

  9. Python +selenium 自动化之元素定位

    selenium之八大元素定位: 1.通过ID的方式定位  id是页面的唯一标识 例如:找到百度的搜索输入框 driver.findElement(By.id("kw")) 2.通 ...

  10. MySQL数据库的集群方案

    读写分离结构(主从) 读多写少,也就是对数据库读取数据的压力比较大. 其中一个是主库,负责写入数据,成为写库:其他都是从库,负责读取数据,成为读库. 对我们的要求: 读库和写库的数据一致: 写数据必须 ...