react-transition-group動畫組件詳解

1.react-transition-group的優勢

React有非常好的開發環境，任何開發需要的基本需求都可以找到官方或大神造的輪子，動畫也不例外。

react-transition-group動畫組件表現很好，可以滿足日常動畫開發需求，而且是React官方提供的動畫過渡庫，有完整的API文檔。

注：

react-transition-group官方文檔

https://reactcommunity.org/react-transition-group/

react-transition-group主要有四個核心庫：

---

2.安裝react-transition-group

切換終端爲cmd後輸入以下代碼進行安裝（注：）：

npm install react-transition-group --save

一開始安裝是報錯的，然後關閉vscode，之後以管理員身份運行vscode後，安裝包成功：

---

3.使用CSSTransition

引入CSSTransition：

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

使用的方法就和使用自定義組件一樣,直接寫<CSSTransition>，而且className屬性在CSSTransition相對應的是classNames（記得加s）屬性。修改上節寫的Boss.js文件裏的render區域：

render() { 
    return ( 
        <div>
            {/*this.state.toshow值爲true時，className爲show意思是顯示div內的文字；反之隱藏。  */}
            {/* <div className={this.state.toshow?'show':'hide'}>boss級人物：鎧爹</div> */}
            <CSSTransition 
                in={this.state.toshow}
                timeout={2000}
                classNames={boss-text}
            >
                <div>boss級人物：鎧爹</div>
            </CSSTransition>
            <div>
                <button onClick={this.changeToshow}>召喚boss</button>
            </div>
        </div>   
    );
}

注：

<CSSTransition>標籤的屬性：

in：in值的變化決定了動畫是enter還是exit，in值的變化是觸發動畫的扳機。

timeout：動畫持續時間（ms）

classNames：css類名

---

修改style.css:

.boss-text-enter {
    opacity: 0;
}
.boss-text-enter-active {
    opacity: 1;
    transition: opacity 2000ms;
}
.boss-text-enter-done {
    opacity: 1;
}
.boss-text-exit {
    opacity: 1;
}
.boss-text-exit-active {
    opacity: 0;
    transition: opacitty 2000ms;
}
.boss-text-exit-done {
    opacity: 0;
}

報錯：

原因是classNames={boss-text}不應該是{}，而是引號

修改代碼：

<CSSTransition 
    in={this.state.toshow}
    timeout={2000}
    classNames='boss-text'
>

效果：

注：

xxx-enter: 進入（入場）前的CSS樣式；

xxx-enter-active:進入動畫直到完成時之前的CSS樣式;

xxx-enter-done:進入完成時保留的CSS樣式;

xxx-exit:退出（出場）前的CSS樣式;

xxx-exit-active:退出動畫知道完成時之前的的CSS樣式。

xxx-exit-done:退出完成時保留的CSS樣式。

CSS3 opacity 屬性

CSS3 transition-property屬性

---

unmountOnExit屬性：在元素退場時，自動把DOM也刪除，這是以前用CSS動畫沒辦法做到的。

元素退場時，把  <div>boss級人物：鎧爹</div> 也刪除了

---

注：

Boss.js完整代碼如下：

import React, { Component } from 'react';
import {CSSTransition} from 'react-transition-group'
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            toshow:true
        }
        this.changeToshow =this.changeToshow.bind(this)
    }
    render() { 
        return ( 
            <div>
                {/*this.state.toshow值爲true時，className爲show意思是顯示div內的文字；反之隱藏。  */}
                {/* <div className={this.state.toshow?'show':'hide'}>boss級人物：鎧爹</div> */}
                <CSSTransition 
                    in={this.state.toshow}
                    timeout={2000}
                    classNames='boss-text'
                    unmountOnExit
                >
                    <div>boss級人物：鎧爹</div>
                </CSSTransition>
                <div>
                    <button onClick={this.changeToshow}>召喚boss</button>
                </div>
            </div>   
        );
    }
    // changeToshow用於切換this.state.toshow的值，爲true時切換爲false,爲false時切換爲true
    changeToshow(){
        this.setState({
            toshow:this.state.toshow?false:true
        })
    } 
}
 
export default Boss;

---

4.使用transitionGrop

需求：爲服務列表添加動畫

實現：

在Xiaojiejie.js的頭部引入transitionGrop：

import {TransitionGroup,CSStransition} from 'react-transition-group'

修改Xiaojiejie.js，爲ul內，最外層加入TransitionGroup標籤，爲子組件XiaojiejieItem外層包裹CSSTransition標籤，代碼如下：

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
        { 
            this.state.list.map((item,index)=>{
                return(                           
                    <CSSTransition
                        // in={this.state.toshow}
                        timeout={2000}
                        classNames='boss-text'
                        unmountOnExit
                        appear={true}   
                        key={item+index}
                    >
                        <XiaojiejieItem 
                        content={item} 
                        index={index}
                        key={item+index}
                        deleteItem={this.deleteItem.bind(this)}
                    </CSSTransition>
                )   
            })
        } 
    </TransitionGroup>
</ul>

CSSTransition的appear屬性：

appear={true}，意思是想讓組件出現時就有動畫效果。

實現效果（服務列表添加動畫成功）：