动画不顺利通过ReactCSSTransitionGroup

Question

我正在创建一个图像旋转木马，从右到左动画图像。这似乎是工作期望的顺利。有一些锯齿状的动画，我无法想象如何使它完美。我创造了一个小提琴，它似乎比我的网站更好地工作。我认为形象的高度和宽度可能是一个原因。请检查fiddle

阵营代码

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

    const ImageArray = ["https://media-cdn.tripadvisor.com/media/photo-s/09/c7/bc/96/the-bull-ring-arena.jpg", "https://media-cdn.tripadvisor.com/media/photo-s/0d/0a/cb/5d/the-bull-ring-arena-ext.jpg"]; 

    class CarouselImage extends React.Component{ 

    componentDidMount(){ 

    } 

    render(){ 
     return (
      <div className="all-detail-images"> 
      <img ref="bull" className="blurred-background" src={this.props.src} alt="detail image"/> 
      <img ref="bullRing" className="detail-image-style" src={this.props.src} alt="detail image"/> 
      </div> 

     ) 
    } 
    } 

    class Carousel extends React.Component{ 

    constructor(props) { 
     super(props); 
     this.state = {position: 0}; 
     } 

    componentDidMount(){ 
     setInterval(() => { 
     if(this.state.position){ 
      this.setState({position: 0}); 
     }else{ 
      this.setState({position: 1}); 
     } 

     },6000); 

     } 

    render(){ 
     return (
     <div className="image-gallery-div"> 
      <ReactCSSTransitionGroup transitionName="carousel-image" 
            transitionLeaveTimeout={1000} 
            transitionEnterTimeout={1000}> 

      <CarouselImage src={ImageArray[this.state.position]} key={this.state.position}/> 

     </ReactCSSTransitionGroup> 
      </div> 
     ) 
    } 
    } 

     class HelloWidget extends React.Component{ 
      constructor(props) { 
      super(props); 
      this.handleChange = this.handleChange.bind(this) 
      this.state = { 
        name: '' 
      }; 
      } 

      handleChange(e) { 
      this.setState({ 
       name: e.target.value 
      }); 
      } 

      render() { 
       return <div className="max-width-carousel"> 
        <Carousel /> </div>; 
      } 
     } 

     React.render(<HelloWidget />, document.getElementById('container')); 

CSS

.max-width-carousel{ 
     width: 100%; 
     max-width: 100%; 
     overflow: hidden; 
     height: 75vh; 
    } 

    .all-detail-images{ 
     z-index: 0; 
     width: 100%; 
     height: 75vh; 
     position: relative; 
     overflow: hidden; 
     float: left; 
    } 

    .blurred-background{ 
     filter:blur(3px); 
     width: 100%; 
     height: 100%; 
    } 


    .image-gallery-div{ 
     top: 0; 
     width: 100%; 
     text-align: center; 
     overflow: hidden; 
    } 

    .detail-image-style{ 
     height : 75vh; 
     max-width: 100%; 
     position: absolute; 
     z-index: 5; 
     left: 0; 
     right: 0; 
     margin: auto; 
    } 



     .carousel-image-enter { 
     margin-left: 100%; 
     } 

     .carousel-image-enter.carousel-image-enter-active { 
     margin-left: 0%; 
     transition: all 1s linear; 
     } 

     .carousel-image-leave { 
     position: absolute; 
     top:0; 
     left:0; 
     } 

     .carousel-image-leave.carousel-image-leave-active { 
     transition: all 1s linear; 
     left: -100%; 
     } 

Answer 1

不要ReactTransitionGroup浪费你的时间，因为它会在反应V15.5被弃用（https://github.com/facebook/react/issues/8854） 。

看看react-motion而不是（https://github.com/chenglou/react-motion），特别是在照片库演示（http://chenglou.github.io/react-motion/demos/demo4-photo-gallery）。