React動畫react-transition-group安裝使用

可以登錄https://github.com，在github上搜索react-transition-group

搜索出結果，點擊星多的項目
這裏有個主文檔，點擊進入

安裝語句有兩種,在自己項目的目錄裏安裝

npm

npm install react-transition-group --save

yarn

yarn add react-transition-group

Components裏有各種案例和說明，喜歡看文檔的小夥伴可以看看

普通React加動畫效果

js代碼

import React,{ Component,Fragment } from 'react';
import './test.css';//引入樣式

class Test3 extends Component{
    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this)
    }

    render(){
        return(
            <Fragment>
                <div className={this.state.show?'show':'hide'}>hello</div>
                   
                <button onClick={this.handleToggle}>toggle</button>             
            </Fragment>
        ) 
    }
    handleToggle(){
        this.setState({
            show:this.state.show?false :true
        })
    }
}
export default Test3;

test.css代碼

.show{animation: show-item 1s ease-in forwards}
.hide{animation: hide-item 1s ease-in forwards}
@keyframes hide-item{
    0%{
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100%{
        opacity: 0;
        color: blue;
    }
}
@keyframes show-item{
    0%{
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100%{
        opacity: 1;
        color: blue;
    }
}

引入react-transition-group模塊使用

js代碼

import React,{ Component,Fragment } from 'react';
import './test.css';//引入樣式
import { CSSTransition,TransitionGroup } from 'react-transition-group';//引入react-transition-group模塊

class Test3 extends Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this)
        this.handleAddItem=this.handleAddItem.bind(this)
    }

    render(){
        return(
            <Fragment>
                    <CSSTransition
                        in={this.state.show}// 如果this.state.show從false變爲true，則動畫入場，反之out出場
                        timeout={1000}//動畫時間
                        classNames='fade'//自定義class名稱
                        unmountOnExit//可選，當動畫出場後在頁面上移除包裹的dom節點
                        onEntered={(el)=>{el.style.color='blue'}}//可選，動畫入場之後的回調，el指被包裹的dom，讓div內的字體顏色等於藍色
                        onEnter={(el)=>{el.style.color='red'}}//可選，el指被包裹的dom，動畫一開始的樣式回調函數
                        appear={true}//可選，dom節點一開始出現在頁面上是否出現動畫效果
                    >
                        <div>hello</div>
                    </CSSTransition>
                <button onClick={this.handleToggle}>改變hello動畫</button> 
                
                
                 <TransitionGroup>
               {
                  
                    this.state.list.map((item,index)=>{
                        return(
                            <CSSTransition
                            key={index}
                                timeout={1000}//動畫時間
                                classNames='fade'//自定義class名稱
                                unmountOnExit//可選，當動畫出場後在頁面上移除包裹的dom節點
                                onEntered={(el)=>{el.style.color='blue'}}//可選，動畫入場之後的回調，el指被包裹的dom，讓div內的字體顏色等於藍色
                                onEnter={(el)=>{el.style.color='red'}}//可選，el指被包裹的dom，動畫一開始的樣式回調函數
                                appear={true}//可選，dom節點一開始出現在頁面上是否出現動畫效果
                            >
                               <div>{item}</div>
                            </CSSTransition>
                           
                        )
                    })
               }
               </TransitionGroup>
                <button onClick={this.handleAddItem}>加內容出現動畫效果</button>

            </Fragment>
        ) 
    }
    handleToggle(){
        this.setState({
            show:this.state.show?false :true
        })
    }
    handleAddItem(){
        this.setState((prevState)=>{
            return{
                list:[...prevState.list,'item']
            }
        })
    }
}

export default Test3;

test.css代碼

.fade-enter,.fade-appear{opacity: 0;} /* enter是入場前的剎那（點擊按鈕），appear指頁面第一次加載前的一剎那（自動） */
.fade-enter-active,.fade-appear-active{opacity: 1;transition: opacity 1s ease-in}  /* enter-active指入場後到入場結束的過程，appear-active則是頁面第一次加載自動執行 */
.fade-enter-done,.fade-appear-done{opacity: 1;} /* 入場動畫執行完畢後，保持狀態 */


.fade-exit{opacity: 1;}/* 出場動畫開始 */
.fade-exit-active{opacity: 0;transition: opacity 1s ease-in}/* 出場動畫開始到結束的過程 */
.fade-exit-done{opacity: 0;}/* 出場動畫執行完畢後，保持狀態 */