javascript - ReactCSSTransitionGroup 动画不流畅

Question

我正在创建一个图像轮播，从右到左动画图像。这似乎是工作期望的平滑度。有一些锯齿状的动画，我不知道如何让它变得完美。我创建了一个 fiddle ，它在那里似乎比在我的网站上工作得更好。我认为图像的高度和宽度可能是一个原因。请查看 fiddle

react 代码

    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 上浪费时间，因为它将在 React 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)。