可以登录https://github.com，在github上搜索react-transition-group 搜索出结果，点击星多的项目 这里有个主文档，点击进入

安装语句有两种,在自己项目的目录里安装

npm

npm install react-transition-group --save

yarn

yarn add react-transition-group Components里有各种案例和说明，喜欢看文档的小伙伴可以看看

普通React加动画效果

js代码

import React,{ Component,Fragment } from 'react'; import './test.css';//引入样式 class Test3 extends Component{ constructor(props){ super(props); this.state={ show:true } this.handleToggle=this.handleToggle.bind(this) } render(){ return( <Fragment> <div className={this.state.show?'show':'hide'}>hello</div> <button onClick={this.handleToggle}>toggle</button> </Fragment> ) } handleToggle(){ this.setState({ show:this.state.show?false :true }) } } export default Test3;

test.css代码

.show{animation: show-item 1s ease-in forwards} .hide{animation: hide-item 1s ease-in forwards} @keyframes hide-item{ 0%{ opacity: 1; color: red; } 50%{ opacity: 0.5; color: green; } 100%{ opacity: 0; color: blue; } } @keyframes show-item{ 0%{ opacity: 0; color: red; } 50%{ opacity: 0.5; color: green; } 100%{ opacity: 1; color: blue; } }

引入react-transition-group模块使用

js代码

import React,{ Component,Fragment } from 'react'; import './test.css';//引入样式 import { CSSTransition,TransitionGroup } from 'react-transition-group';//引入react-transition-group模块 class Test3 extends Component{ constructor(props){ super(props); this.state={ list:[], show:true } this.handleToggle=this.handleToggle.bind(this) this.handleAddItem=this.handleAddItem.bind(this) } render(){ return( <Fragment> <CSSTransition in={this.state.show}// 如果this.state.show从false变为true，则动画入场，反之out出场 timeout={1000}//动画时间 classNames='fade'//自定义class名称 unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点 onEntered={(el)=>{el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色 onEnter={(el)=>{el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数 appear={true}//可选，dom节点一开始出现在页面上是否出现动画效果 > <div>hello</div> </CSSTransition> <button onClick={this.handleToggle}>改变hello动画</button> <TransitionGroup> { this.state.list.map((item,index)=>{ return( <CSSTransition key={index} timeout={1000}//动画时间 classNames='fade'//自定义class名称 unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点 onEntered={(el)=>{el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色 onEnter={(el)=>{el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数 appear={true}//可选，dom节点一开始出现在页面上是否出现动画效果 > <div>{item}</div> </CSSTransition> ) }) } </TransitionGroup> <button onClick={this.handleAddItem}>加内容出现动画效果</button> </Fragment> ) } handleToggle(){ this.setState({ show:this.state.show?false :true }) } handleAddItem(){ this.setState((prevState)=>{ return{ list:[...prevState.list,'item'] } }) } } export default Test3;

test.css代码

.fade-enter,.fade-appear{opacity: 0;} /* enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动） */ .fade-enter-active,.fade-appear-active{opacity: 1;transition: opacity 1s ease-in} /* enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行 */ .fade-enter-done,.fade-appear-done{opacity: 1;} /* 入场动画执行完毕后，保持状态 */ .fade-exit{opacity: 1;}/* 出场动画开始 */ .fade-exit-active{opacity: 0;transition: opacity 1s ease-in}/* 出场动画开始到结束的过程 */ .fade-exit-done{opacity: 0;}/* 出场动画执行完毕后，保持状态 */