react-transition-group-CSSTransition 的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pansuyong/article/details/82890069

eg:app.js

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

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggole=this.handleToggole.bind(this)
    }
  render() {
      // render函数里面都是jsx语法-需要用reat
    return (
        <Fragment>
            <CSSTransition in={this.state.show}
                           timeout={1000}
                           classNames='fade'
                           unmountOnExit
                           onEntered={(el)=>{
                               el.style.color='blue'
                           }}
                           appear={true}>
                <div>hello</div>
            </CSSTransition>
            {/*<div className={this.state.show ? 'show':'hide'}>hello</div>*/}
            <button onClick={this.handleToggole}> toggole</button>
        </Fragment>

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

export default App;

app.css:

.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;
}