ReactTransitionGroup 工具的使用 代码直接上，理论不说了

test.jsx 

import ReactTransitionGroup from 'react-addons-css-transition-group';

.... 

<div className="helpModal" >
        <ReactTransitionGroup transitionName="modal" transitionEnterTimeout={400} 
                  <div className='container'>
                  </div>
         </ReactTransitionGroup>
</div>

scss.scss

.helpModal{
        .modal-enter {
            transform: translate(0,100%);
        }
      
        .modal-enter.modal-enter-active {
            transform: translate(0,0);
            transition: transform 400ms ease-in;
        }
      
        .modal-leave {
            transform: translate(0,100%);
        }
      
        .modal-leave .modal-leave-active {
            transform: translate(0,100%);
            transition: transform 400ms ease-in;
        }
      
}

.helpModal{
    .container{
      position: absolute;
      z-index: 10003;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
     
      transition: transform 0.4s;
    }
  }

 

说明：

transitionName ： 样式名称

transitionEnterTimeout ： 进入动画的持续时间

transitionLeaveTimeout：离开动画的持续时间