react中使用react-transition-group實現動畫

css動畫的方式，比較局限，涉及到一些js動畫的時候沒法處理了。react-transition-group是react的第三方模塊，借住這個模塊可以更方便的實現更加復雜的動畫效果

https://github.com/reactjs/react-transition-group

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

主要用里面的cssTransition

 

js

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


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

　　render() {
　　　　return (
　　　　　　<Fragment>
　　　　　　　　<CSSTransition
　　　　　　　　　　in={this.state.show}
　　　　　　　　　　timeout={1000}
　　　　　　　　　　classNames="fade"
　　　　　　　　　　unmountOnExit
　　　　　　　　　　appear={true}
　　　　　　　　>
　　　　　　　　　　<div>hello</div>
　　　　　　　　</CSSTransition>
　　　　　　　　<button onClick={this.handleToggle}>toggle</button>
　　　　　　</Fragment>
　　　　)
　　}

　　handleToggle() {
　　　　this.setState({
　　　　　　show: this.state.show ? false : true
　　　　})
　　}
}
export default App;

 

css

/* 入場動畫 fade-appear fade-appear-active 第一次才游泳*/
.fade-enter, .fade-appear{
　　opacity: 0;
}
.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;
}

 

咋一看，這個實現過程反而變得復雜了，並沒有變得簡單，雖然復雜了，但是帶給了我們很多新的特性。

看官方網站，他接受一個unmountOnExit這樣一個屬性，發現dom也別移除了，這個功能之前是沒法做到的，用這個庫就顯得非常簡單。

 

再看，后面提供了很多的鈎子函數，這就可以通過js額外的干一點事情，比如hello顯示出來之后，希望他的顏色變成紅色，

.fade-enter-done{
　　opacity: 1;
　　color: red;
}

這樣就可以了。但是也可以用 js實現這個動畫，在css屬性上加上

onEntered={(el)=>{
　　el.style.color='blue'
}}

這種語法在之前做動畫的時候也是沒法實現的

 

 

多個動畫的js

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
                                    appear={true}
                                >
                                    <div key={index}>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                </TransitionGroup>
                <button onClick={this.handleAddItem}>toggle</button>
            </Fragment>   
        )
    }

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