react react-transition-group动画插件

设置一组动画
	内部只能有一个容器包裹！！！
	
	1、安装
		cnpm install react-transition-group --save
		
	2、引入
		import { CSSTransition } from 'react-transition-group';
	
	3、使用
		<CSSTransition
			in={show}    动画触发布尔值
	        timeout={n}   动画时间n毫秒,尽量和内部设置的过渡时间一样,否则优先级大于内部设置的过渡时间
	        classNames='xx'  设置出现隐藏动画的类名
	        unmountOnExit  当元素隐藏时,删除其dom元素,不保留空间,出现时创建
	        onEntered={动画进场结束时的回调函数,第一个参数是包裹的所有dom对象}
	        appear={true}  是否设置第一次出现时有动画,默认为否
		>
			标签...
		</CSSTransition>
		
	4、动画类
		.xx-enter,.xx-exit-done  刚入场/离场结束
		.xx-enter-done,.xx-exit  入场结束/刚离场
		.xx-enter-active,.xx-exit-active   入场过程/离场过程
		
		配合appear={true}时,第一次加载时的出现动画
		.xx-appear		刚出现
		.xx-appear-active  出现过程
		.xx-appear-done   出现结束
	
	5、动画钩子函数,对应动画的不同时期,第一个参数都是内部包含的dom对象
		onEnter
		onEntering
		onEntered
		
		onExit
		onExiting
		onExited
		
设置多组动画
	如数组增加时,每一个元素的动画

	1、安装
		cnpm install react-transition-group --save
		
	2、引入
		import { CSSTransition,TransitionGroup } from 'react-transition-group';
	
	3、使用
		TransitionGroup和CSSTransition之间不能有任何除文本以外的其他任何元素(如标签)!!!
	
		<TransitionGroup className="todo-list">
		{
			{show.map((item,index)=>
	              (
		            <CSSTransition
		            	in属性不需要
		            	key={x}
						...
		              >
		               内容
		              </CSSTransition>
		          )
	           )
            }
		}

代码示例:
单组动画:

import React,{useState} from 'react';
import './App.css';
import { CSSTransition } from 'react-transition-group';
 
  

function App() {
  const [show,setShow] = useState(true);

  return (
    <div className="App">

      <CSSTransition
        in={show}
        timeout={1000}
        classNames='fade'
        unmountOnExit
        onEntered={(el)=>{console.log(el.style.color='red')}}
        appear={true}
      >
        <div className='d1'>
          hello
        </div>  
      </CSSTransition>
      <button onClick={()=>{setShow(!show);console.log(show)}}>切换</button>

    </div>
  );
}

export default App;

---

.fade-enter
{
  opacity: 0;
}
  .fade-enter-active
{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done
{
  opacity: 1;
}
.fade-exit
{
  opacity: 1;
}
.fade-exit-active
{
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done
{
  opacity: 0;
}
.fade-appear
{
  opacity: 0;
  font-size: 30px;
}
.fade-appear-active
{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-appear-done
{
  opacity: 1;
}


.d1{

}

多组动画:

import React,{useState} from 'react';
import './App.css';
import { CSSTransition,TransitionGroup } from 'react-transition-group';
 
  

function App() {
  const [show,setShow] = useState(['hh']);

  return (
    <div className="App">
      <TransitionGroup className="todo-list">
          {show.map((item,index)=>
              (
                <CSSTransition
                timeout={1000}
                classNames='fade'
                key={index}
              >
                <div key={index}>{item}</div>
              </CSSTransition>
              )
           )}
        </TransitionGroup>
        <button onClick={()=>{setShow([...show,'hh']);console.log(show)}}>切换</button>
    </div>
  );
}

export default App;

---

.fade-enter
{
  opacity: 0;
}
  .fade-enter-active
{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done
{
  opacity: 1;
}
.fade-exit
{
  opacity: 1;
}
.fade-exit-active
{
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done
{
  opacity: 0;
}
.fade-appear
{
  opacity: 0;
  font-size: 30px;
}
.fade-appear-active
{
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-appear-done
{
  opacity: 1;
}


.d1{

}