react-jsx - ReactCSSTransitionGroup 简单示例

Question

我一直在使用 ReactCSSTransitionGroup 进行基本动画 - 比如从左到右和从右到左滑入 2 张图像，但无法实现它 - 我在这里缺少什么 - 图像动画，但尽快回到原来的位置动画结束了 - 它在屏幕上看起来不太好。

  <ReactCSSTransitionGroup transitionName="square1" transitionAppear transitionEnterTimeout={1000}>
    <img key={this.state.altText} alt="image" className="square-1" src="/images/sqr.svg" />
  </ReactCSSTransitionGroup>

  <ReactCSSTransitionGroup transitionName="square2" transitionAppear transitionEnterTimeout={1000}>
    <img key={this.state.altText} alt="image" className="square-2" src="/images/sqr2.svg" />
  </ReactCSSTransitionGroup>

CSS：

.square-1{
    opacity: 0.4;
    float:left;
    position: absolute;
    top:60px;
    width: 150px;
    left:-35px;
}

.square-2{
    opacity: 0.4;
    float:right;
    width: 150px;
    position: absolute;
    right:-10px;
    top:30px;
}

.square1{
      position: absolute;
      border:1px solid green;
      left:10px;
      top:90px;
}
.square1-appear {
      opacity: 0.01;
      transition: all 2s linear;
      position:absolute;
      left:-200px;
}    
 .square1-appear.square1-appear-active {
      opacity: 0.4;
      transition: all 2s ease-in;
      position:absolute;
      left:-30px;
      top:-10px;
    }
    .square1-leave.square1-leave-active{
          border:1px solid red;
     }

    .square2{
      position: absolute;
      right:10px;
      top:30px;
    }
    .square2-appear {
      opacity: 0.01;
      transition: all 4s ease-in;
      position:absolute;
      right:-200px;
    }

    .square2-enter {
      opacity: 0.01; 
      position:absolute;
      right:-400px;

    }

    .square2-appear.square2-appear-active {
      opacity: 0.8;
      transition: all 2s ease-in;
      position:absolute;
      right:100px;

    }