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{

}