반응 - 전환 그룹에 대한 사용자 정의 반응 캐 러셀 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); 
    } 
}