react的css过渡动画

<Fragment>占位符

opacity：透明度
（过渡）transition： all 1s ease-in;
所有的css都以1s时间做过渡

定义一个动画
.hide{
	animation: hide-item 2s ease-in forwards;//forwards可使最后一帧动画保留下来
}
@keyframes hide-item {
 0% {
 opacity:1;
 color:red;
 }
 50% {
 opacity:0.5;
 color:green;
 }
  100% {
 opacity:0;
 color:blue;
 }
}

复杂的动画涉及JS
需要安装一个React Transition Group

import { CSSTransition } from ' react-transition-group';
直接在里面加入组件 <CSSTransition> 需要添加处理的<div>块 </CSSTransition>
 <CSSTransition in={this.state.show}//根据哪个值
 timeout={1000}//执行多久
 unmountOnExit //可以使组件隐藏的时候所在的模块也移除 显示的时候重新出现
 onEntered={ (el) => {el.style.color='blue'} }//JS 钩子函数 在某时候自动执行 出场动画结束的时候触发
 onEntering 出场动画的第二时刻被触发
 onEnter 出场动画的第一时刻
 appear={true} //第一次展示也要动画效果 在css文件中增加 fade-appear  fade-appear-active函数
 classNames='fade'//css的名子
 > 
.fade-enter {//入场动画
}
.fade-enter-active //进入入场enter完成前到完成之间
{
}
.table-enter-done {
}
.fade-exit {//出场动画
}

要做多个DOM元素切换该怎么做呢？Transition Group
先把之前写的CSSTransition去掉

import{ CSSTransition,TransitionGroup } from 'react-transition-group';
constructior里
this.state ={
list:[]
}
this.handleAddItem = this.handleAddItem.bind(this);

<TransitionGroup>//都要进行动画效果
循环遍历
this.state.list.map((item) => {
	return (
		<CSSTransition 之前的效果 除去in这个参数  key={ index }>
		<div >{item}</div>//不加key值会报错
		</CSSTransition>
		)
		}
</TransitionGroup>	
	
<button onClick={this.handleAddItem>toggle</button>

handleAddItem () {
 this.setState( ( prevState ) => {
 return {
 	list:[...prevState.list,'item']
 }
 }
}