筆記繼續…

1、使用 react-transition-group 擴充套件，實現css動畫

• 安裝: npm install react-transition-group --save

1.使用CSSTransition控制單個元素執行動畫：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={this.state.xxx}  //this.state.xxx資料改變時執行動畫
  timeout={1000}       //動畫執行時間
  classNames='fade'    //類名字首
 

  unmountOnExit        //加上這個屬性，會在出場動畫執行完畢時，移除這個DOM
  
  //鉤子函式  //只寫出一個作為舉例
  onEntered={(e) => {  //onEntered在入場動畫執行完時執行（e代表被包裹的DOM元素，可以換成其他字元）
    e.style.color = 'blue';
  }}
  appear={true}        //當頁面第一次渲染時，執行一次入場動畫（需要增加appear類）
>
  <h1>Hello World</h1>
</CSSTransition>

需要寫的css類如下：

.fade-enter, .fade-appear {}                //入場動畫剛開始
.fade-enter-active, .fade-appear-active {}  //入場動畫執行過程
.fade-enter-done {}                         //入場動畫執行完畢

.fade-exit {}                               //出場動畫剛開始
.fade-exit-active {}                        //出場動畫執行過程
.fade-exit-done {}                          //出場動畫執行完畢
 

其中.fade-appear類和.fade-appear-active類是上面appear={true}時才需要新增的。fade就是上面指定的類名字首

所有的鉤子函式如下：

onEnter     //入場動畫剛開始時執行
onEntering  //入場動畫執行時執行
onEntered   //入場動畫執行完時執行

onExit      //出場動畫剛開始時執行
onExiting   //出場動畫執行時執行
onExited    //出場動畫執行完時執行

2.配合TransitionGroup來實現操作多個DOM元素執行動畫

import { TransitionGroup } from 'react-transition-group';

<TransitionGroup>
{
  this.state.list.map((item, index) => {
  return (
    <CSSTransition
      //這裡CSSTransition就不需要in屬性了，其他屬性同上
    >
      <h1>{item}</h1>
    </CSSTransition>
    );
  });
}
</TransitionGroup>

有錯誤或不足歡迎指正~

待續…