title: Direction of Slide animation in React
body: <p>I am creating a carousel and there are 2 buttons Next and Previous. on clicking Next it should slide from left to right and on clicking Previous it should slide from right to left. (I don't want to use any plugin)</p>
  
  <p>My React container:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { prevItem, nextItem, initItem } from '../actions/index';
  import { bindActionCreators } from 'redux';
  import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
  
  class Carousel extends Component{
  
      previous(){
          this.props.prevItem();
      }
  
      next(){
          this.props.nextItem();
      }
  
  
      componentDidMount(){
          this.props.initItem();
      }
  
      renderItem(){
          const  {item} = this.props;
          const webLink = `http://${item.link}`;
          const transitionOptions = {
              transitionName: 'slide',
              transitionEnterTimeout: 1000,
              transitionLeaveTimeout: 1000
          };
  
  
          return(
              &lt;CSSTransitionGroup {...transitionOptions}&gt;
                  &lt;div className="carousel__item" key={item.id}&gt;
                      &lt;img className="carousel__image" src={item.imageurl}/&gt;
                      &lt;div className="carousel__text"&gt;
                          &lt;h3&gt;{item.title}&lt;/h3&gt;
                          &lt;p&gt;{item.synopsis}&lt;/p&gt;
                          &lt;a href={webLink} target="_black"&gt;{item.link}&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/CSSTransitionGroup&gt;
          )
  
      }
      render(){
  
  
          return(
  
                  &lt;div className="carousel"&gt;
                      {this.renderItem()}
                      &lt;div className="carousel__prev" onClick={this.previous.bind(this)}&gt;
                          &lt;i className="fa fa-chevron-left"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div className="carousel__next" onClick={this.next.bind(this)}&gt;
                          &lt;i className="fa fa-chevron-right"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
          )
      }
  }
  
  function mapStateToProps(state){
      return {item: state.item};
  }
  
  function mapDispatchToProps(dispatch){
      return bindActionCreators({
          initItem: initItem,
          nextItem: nextItem,
          prevItem: prevItem
      }, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Carousel);
  </code></pre>
  
  <p>Any my Style.css is:</p>
  
  <pre><code>.carousel{
      width: 100%;
      border: 1px solid #ccc;
      margin-top: 100px;
      position: relative;
  }
  
  .carousel__item{
      width: 100%;
      color: #fff;
      position: relative;
  }
  
  .carousel__item img{
      width: 100%;
      background: rgba(0,0,0,.6);
  }
  
  .carousel__text{
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  .carousel__text a:hover,
  .carousel__text a{
      color: #fff;
  }
  
  .carousel__prev{
      position: absolute;
      left: 0;
      top: 50%;
      color: #fff;
      margin-left: 10px;
      cursor: pointer;
      font-size: 25px;
  }
  
  .carousel__next{
      position: absolute;
      right: 0;
      top: 50%;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
      font-size: 25px;
  }
  
  .slide-enter{
      transform: translate(100%);
  }
  
  .slide-enter-active{
      transform: translate(0%);
      transition: transform 1000ms ease-in-out;
  }
  
  .slide-leave{
      transform: translate(0%);
  }
  
  .slide-leave-active{
      transform: translate(-100%);
      transition: transform 1000ms ease-in-out;
  }
  </code></pre>
  
  <p>Apart from the direction, the current slide animation is not correct. when it slides the previous slide is showing below. So basically 2 slides are showing on screen on transition. Do you know how to fix this problem and also address the direction of slide?</p>