我想实现类似iOS 那样左进右出的页面切换效果，请问改什么弄，css样式改什么写 ，

以下是我的代码 ，现实了push 的动画，返回时的动画和push动画一样（这不是我想要的），请指正

class Add extends Component {


   render() {
       console.log('app:' + this.props.location.pathname)
       return (
           <ReactCSSTransitionGroup
               component="div"
               className="react-container"
               transitionName="slide-in"
               transitionEnterTimeout={300}
               transitionLeaveTimeout={300}>
               <div key={this.props.location.pathname} className={this.props.location.pathname}>
                   {this.props.children}
               </div>
           </ReactCSSTransitionGroup>
       )
   }



}
export default withRouter(Add)

/***********************css部分**********************/

.slide-in-enter,
.slide-in-leave {
   -webkit-transition: all 300ms;
   transition: all 300ms;
}

.slide-in-enter { /* begin **/
   opacity: 0.01;
   margin-left: 128px;
}

.slide-in-enter.slide-in-enter-active { /* finish **/
   opacity: 1;
   margin-left: 0;
}

.slide-in-leave {
   opacity: 1;
   margin-left: 0;

}

.slide-in-leave.slide-in-leave-active {
   opacity: 0.01;
   margin-left: -128px;
}

.animateslide-in {
   display: block;
   height: 128px;
   position: relative;
   width: 384px;
}

.animateItem {
   color: white;
   font-size: 36px;
   font-weight: bold;
   height: 128px;
   line-height: 128px;
   position: absolute;
   text-align: center;
   -webkit-transition: all 300ms; /* TODO: make this a move animation */
   transition: all 300ms; /* TODO: make this a move animation */
   width: 128px;
}