リアクションでのスライドアニメーションの方向

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は、この（私はいくつかの要素のためのスタイルのコンポーネントを使用していることに注意してください）のようなものになります。私は固定するためにフレキシボックスを使用

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

注意をディスプレイの問題（ハードコードされた幅と同様に）

希望します。