这是我参与更文挑战的第18天，活动详情查看： 更文挑战

Why使用react-trasition-group动画

平常css做动画碰到display: none动画就失效, 比如opcity做淡入淡出效果

安装

npm i react-transition-group --save

1. 在app.js 中导入CSSTransition

import React from 'react';
import Swiper from './components/swiper';
import "./assets/css/app.css";
import  './assets/css/common/animation.css'
import {CSSTransition} from "react-transition-group";

class App extends React.Component{
    constructor(){
        super();
        this.state={
            show: false
        };
    }
    componentDidMount(){

    }
    render(){
        return (
            <div className="App">
                <CSSTransition in={this.state.show} timeout={2000} classNames={"fade"} onEntered={(el)=> {
                    console.log('入场动画回调',el)
                }}
                onExited={(el) => {
                    console.log('入场动画回调',el)
                }}
                >
                    <div className="box"></div>
                </CSSTransition>
                <button onClick={()=>{this.setState({show: !this.state.show})}}>切换盒子状态</button>
            </div>
        )
    }
}

export default App;

2. 写fade 的css样式

/**
进场动画
 */
.fade-enter {
    left: 0;
}

.fade-enter-active {
    left: 300px;
    transition: all 2s;
}

.fade-enter-done {
    left: 300px;
    /*display: none;*/
}

/**
出场动画
 */
.fade-exit {
    left: 300px;
    /*display: block;*/
}

.fade-exit-active {
    left: 0px;
    transition: all 2s;
}

.fade-exit-done {
    left: 0px;
}

3. 效果

4.TransitionGroup和CSSTransition搭配在列表中的使用

1.react-transition-group的优势 React有非常好的开发环境，任何开发需要的基本需求都可以找到官方或大神造的轮子，动画也不例外。

react-transition-group动画组件表现很好，可以满足日常动画开发需求，而且是React官方提供的动画过渡库，有完整的API文档。

注：

react-transition-group官方文档

reactcommunity.org/react-trans…

app.js

 <div className={'user_list_container'}>
                    <ul>
                        <TransitionGroup>
                            {this.state.userList.map((v,i) => (
                                <CSSTransition timeout={300} key={i} classNames={'user'}>
                                    <li className={'user_list_item'} >
                                        <span className={'username'}>{v.username}</span>
                                        <button className={'del_btn'} onClick={this.delUser.bind(this,i)}>删除</button>
                                    </li>
                                </CSSTransition>
                            ))}
                        </TransitionGroup>
                    </ul>
                    <div className={'add_user'}>
                        <input onInput={(e)=>{this.setState({username: e.target.value})}}/>
                        <button onClick={this.addUser.bind(this)}>添加用户</button>
                    </div>
</div>

animation.css

/**
进场动画
 */
.fade-enter {
    left: 0;
}

.fade-enter-active {
    left: 300px;
    transition: all 2s;
}

.fade-enter-done {
    left: 300px;
    /*display: none;*/
}

/**
出场动画
 */
.fade-exit {
    left: 300px;
    /*display: block;*/
}

.fade-exit-active {
    left: 0px;
    transition: all 2s;
}

.fade-exit-done {
    left: 0px;
}

/**
用户退场
 */
.user-exit {
    opacity: 1;
}

.user-exit-active {
    opacity: 0;
    transition: opacity 300ms;
}

.user-exit-done {
    opacity: 0;
}

/**
用户进场
 */
.user-enter {
    opacity: 0;
}

.user-enter-active {
    opacity: 1;
    transition: opacity 300ms;
}

.user-enter-done {
    opacity: 1;
}