反応遷移グループのカスタムリアクションカルーセルCSS

Question

私はReactとreact-transition-groupパッケージでカスタムカルーセルを構築しようとしています。コア機能は動作していますが、私は古い項目の左スライドアウトと新しい項目の左スライドインを実行するCSSを書くのに苦労しています。どんな提案も大歓迎です！私は以下の失敗した試みを含めました。私はそのための私のスタイルを貼り付けるの下

HTML

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { showModal } from '../actions'; 
import { CSSTransition, TransitionGroup } from 'react-transition-group' 

class FeatureCarousel extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { activeIndex: 0 }; 
    ... 
    } 

    ... 

    componentDidMount() { 
    this.progressSlideshow(); 
    } 

    progressSlideshow() { 
    this.timeout = setTimeout(function() { 
     this.next(); 
     this.progressSlideshow(); 
    }.bind(this), 3000); 
    } 

    ... 

    render() { 
    const { activeIndex } = this.state; 
    const { articles, level } = this.props; 

    const slides = articles.map((article, index) => { 
     let { urlToImage, title } = article; 

     return (
     <CSSTransition 
      key={index} 
      classNames="slide" 
      timeout={{ enter: 500, exit: 500 }}> 
      <div 
      key={index} 
      className="carousel-item" 
      onMouseEnter={this.handleMouseEnter} 
      onMouseLeave={this.handleMouseLeave} > 
      <div className="image-wrapper"> 
       <img src={urlToImage} alt={title} /> 
      </div> 
      <div className="carousel-caption d-md-block"> 
       <h4>{title}</h4> 
      </div> 
      </div> 
     </CSSTransition> 
    ) 
    }) 

    return (
     <div className="carousel slide" data-ride="carousel"> 
      <div className="carousel-inner"> 
      <TransitionGroup> 
       {slides[activeIndex]} 
      </TransitionGroup> 
      </div> 
      <a className="carousel-control-prev" role="button" onClick={e => this.previouse()}> 
      <span className="carousel-control-prev-icon" aria-hidden="true" /> 
      <span className="sr-only">Previous</span> 
      </a> 
      <a className="carousel-control-next" role="button" onClick={() => this.next()}> 
      <span className="carousel-control-next-icon" aria-hidden="true" /> 
      <span className="sr-only">Next</span> 
      </a> 
     </div> 
    ); 
    } 
} 

export default connect(null, { showModal })(FeatureCarousel); 

CSS

.slide-enter { 
    transform: translate(-100%); 
} 
.slide-enter.slide-enter-active { 
    transform: translate(0%); 
    transition: transform 500ms ease-in-out; 
} 
.slide-leave { 
    transform: translate(-100%); 
} 
.slide-leave.slide-leave-active { 
    transform: translate(0%); 
    transition: transform 500ms ease-in-out; 
} 

Answer 1

私は、私のカスタムギャラリーと同じ問題を抱えています。
ムーブ次：主要なアイデアは、位置使用している左側

から次のスライドを示す：右側
ムーブ前から次のスライドを表示不可視スライドの絶対

.move-next { 
    .slide-enter { 
     position: absolute; 
     left: 0; 
     top: 0; 
     right: 0; 
     transform: translate(100%, 0); 
     opacity: 0; 
    } 

    .slide-enter-active { 
     transform: translate(0, 0); 
     transition: all $animateInterval ease; 
     opacity: 1; 
    } 

    .slide-exit{ 
     transform: translate(0, 0); 
     opacity: 1; 
    } 

    .slide-exit-active{ 
     transition: all $animateInterval ease; 
     transform: translate(-100%, 0); 
     opacity: 0; 
    } 
} 

.move-prev { 
    .slide-enter{ 
     position: absolute; 
     left: 0; 
     top: 0; 
     right: 0; 
     opacity: 0; 
     transform: translate(-100%, 0); 
    } 

    .slide-enter-active{ 
     transition: all $animateInterval ease; 
     opacity: 1; 
     transform: translate(0, 0); 
    } 

    .slide-exit{ 
     opacity: 1; 
     transform: translate(0, 0); 
    } 

    .slide-exit-active{ 
     transition: all $animateInterval ease; 
     opacity: 0; 
     transform: translate(100%, 0); 
    } 
}