react-transition-group動畫庫

這次用react-transition-group做一個togglebutton控制div顯示和隱藏的例子，首先我們需要安裝react-transition-group，輸入：

npm install react-transition-group --save ，使用yarn的同學輸入 yarn add react-transition-group

組件中引入CSSTransition模塊：

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

將CSSTransition標籤包裹在需要實現動畫效果的元素外，然後進行相關屬性的配置：

//jsx
constructor(props){
        super(props);
        this.state = {
            show: true
        }
    }

    render() {
        return (
            <Fragment>
                <CSSTransition
                      in={this.state.show} // 如果this.state.show從false變爲true，則動畫入場，反之out出場
                      timeout={1000} //動畫執行1秒
                      classNames='fade' //自定義的class名
                      unMountOnExit //可選，當動畫出場後在頁面上移除包裹的dom節點
                      onEntered={(el) => {
                            el.style.color='blue'   //可選，動畫入場之後的回調，el指被包裹的dom，讓div內的字體顏色等於藍色
                      }}
                      onExited={() => {
                            xxxxx   //同理，動畫出場之後的回調，也可以在這裏來個setState啥的操作
                      }}
                      
                >
                    <div>hello</div>
                </CSSTransition>
                <button onClick={this.handleToggole}>toggle</button>
            </Fragment>
        )
    }

    handleToggole: ()=> {
        this.setState({
            show: this.state.show ? false : true
        })
    }
}

一旦動畫入場，插件將會自動的在包裹住的標籤上添加很多css樣式，默認class名是fade，所以我們需要給CSSTransition標籤加上classNames='fade'，然後去css文件進行配置：

//enter是入場前的剎那（點擊按鈕），appear指頁面第一次加載前的一剎那（自動）
.fade-enter, .fade-appear {
    opacity: 0;
}
//enter-active指入場後到入場結束的過程，appear-active則是頁面第一次加載自動執行
.fade-enter-active, .fade-appear-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;
}

如果頁面上一組dom都需要添加動畫效果時我們需要在最外面再加一個TransitionGroup

import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';

class App extends Component {

    constructor(props){
        super(props);
        this.state = {
            list: []
        }
        this.handleAddItem = this.handleAddItem.bind(this);
    }

    render() {
        return (
            <Fragment>
                <TransitionGroup>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <CSSTransition
                                timeout={1000}
                                classNames='fade'
                                unmountOnExit
                                onEntered={(el) => {el.style.color='blue'}}
                                appear={true}
                                key={index}
                            >
                                <div>{item}</div>
                            </CSSTransition>
                        )
                    })
                }
                </TransitionGroup>
                <button onClick={this.handleAddItem}>toggle</button>
            </Fragment>
        )
    }

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

export default App;