반응 슬라이드 애니메이션의 방향

Question

나는 회전 목마를 만들고 다음과 이전 버튼이 2 개 있습니다. 다음을 클릭하면 왼쪽에서 오른쪽으로 슬라이드해야하며 이전을 클릭하면 오른쪽에서 왼쪽으로 슬라이드해야합니다.

이

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(
      <CSSTransitionGroup {...transitionOptions}> 
       <div className="carousel__item" key={item.id}> 
        <img className="carousel__image" src={item.imageurl}/> 
        <div className="carousel__text"> 
         <h3>{item.title}</h3> 
         <p>{item.synopsis}</p> 
         <a href={webLink} target="_black">{item.link}</a> 
        </div> 
       </div> 
      </CSSTransitionGroup> 
     ) 

    } 
    render(){ 


     return(

       <div className="carousel"> 
        {this.renderItem()} 
        <div className="carousel__prev" onClick={this.previous.bind(this)}> 
         <i className="fa fa-chevron-left"></i> 
        </div> 
        <div className="carousel__next" onClick={this.next.bind(this)}> 
         <i className="fa fa-chevron-right"></i> 
        </div> 
       </div> 

     ) 
    } 
} 

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); 

상관 없음있는 style.css은 다음과 같습니다 : 그렇다 방향에서

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

은 현재 슬라이드 애니메이션이다

컨테이너 반응 내 (나는 어떤 플러그인을 사용하지 않음) 올바르지 않습니다. 슬라이드하면 이전 슬라이드가 아래에 표시됩니다. 기본적으로 전환시 화면에 2 개의 슬라이드가 표시됩니다. 이 문제를 해결하고 슬라이드 방향을 처리하는 방법을 알고 계십니까?

Answer 1

방금이 문제를 해결했습니다.

정확한 방향으로 슬라이드하려면 일부 상태를 유지하고 className을 통해 항목에이 상태를 적용해야합니다. 이런 식으로 뭔가 :

render() { 
    <CSSTransitionGroup 
     component={MenuWrapper} 
     transitionName="slide" 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={500}> 
     {this._renderMenu(this.props.selectedSubMenus[menuIdx], menuIdx)} 
     </CSSTransitionGroup> 
} 


_renderMenu = (menu, idx) => { 
    return (
     <Menu key={idx} className={this.state.animationDirection} order={idx}> 
      content  
     </Menu> 
    ) 
} 

같은 것을 (나는 몇 가지 요소에 대한 스타일-구성 요소를 사용하고 있습니다) 같아야합니다 CSS : 나는 순서 인 flexbox를 사용

const menuWidth = "256px"; 
const MenuWrapper = styled.div` 
    display: flex; 
    overflow: hidden; 
    max-width: ${menuWidth}; 
` 

const Menu = styled.div` 
    min-width: ${menuWidth}; 
    order: ${props => props.order}; 
` 
.slide-enter.left { 
    transform: translate(-100%); 
} 
.slide-enter.slide-enter-active.left { 
    transform: translate(0%); 
    transition: transform 500ms ease-in-out; 
} 
.slide-leave.left { 
    transform: translate(-100%); 
} 
.slide-leave.slide-leave-active.left { 
    transform: translate(0%); 
    transition: transform 500ms ease-in-out; 
} 
.slide-enter.right { 
    transform: translate(0%); 
} 
.slide-enter.slide-enter-active.right { 
    transform: translate(-100%); 
    transition: transform 500ms ease-in-out; 
} 
.slide-leave.right { 
    transform: translate(0%); 
} 
.slide-leave.slide-leave-active.right { 
    transform: translate(-100%); 
    transition: transform 500ms ease-in-out; 
} 

참고 해결을 디스플레이 문제 (물론 일부 하드 코딩 폭)

희망이