react에서 간단한 동효 실현

npm install react-transition-group -s

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

//           
<Fragment>
    <CSSTransition
        in={
     this.state.shows} //   this.state.show false  true，     ，  out  
        timeout={
     1000} //    1 
        classNames='fade' //    class 
        onEntered={
     () => {
     
            document.getElementById("loginForm").setAttribute("class", "loginAnimate");
            //  ，         ，      dom  ，            ，    ，       css      
        }}
        // onExited={() => {
     
        //     document.getElementById("loginForm").setAttribute("class", "loginAnimate");
        //     //  ，         ，        setState    
        // }}
    >
        <div className="login" id='loginForm'>
            <div className="title">
                <div className="name">
                        BWM      
                </div>
                <div className="description">
                       
                </div>
            </div>
            <div className="loginForm">
                <form className="loginMsg">
                    <div className="loginLable">
                        <input placeholder="      " onChange={
     this.setTel.bind(this)} value={
     this.state.telephone}/>
                    </div>
                    <div className="loginLable">
                        <input type="password" placeholder="    " onChange={
     this.setPass.bind(this)} value={
     this.state.password}/>
                    </div>
                    <div className="loginLable">
                        <button className="Button buttonColor" type='button'
                                onClick={
     this.login.bind(this)}>  
                        </button>
                        <button className="Button" type='button' onClick={
     this.resetForm.bind(this)}>  </button>
                    </div>
                    <div className="loginButton"></div>
                </form>
            </div>
        </div>
    </CSSTransition>
</Fragment>

//         css
.fade-enter, .fade-appear {
     
    opacity: 0;
    margin: -250px 300px;
    transition: all 0.8s linear;
}

.fade-enter-active, .fade-appear-active {
     
    opacity: 0.5;
    margin: 0 300px;

}

.fade-enter-done {
     
    opacity: 1;
    margin: 0 300px;
}