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）。

ReactCSSTransitionGroup不能平滑动画

1 个答案: