在其他组件在React中完成动画制作后运行组件转换

Question

我正在尝试在组件 上触发某些组件上的安装/卸载动画过渡。

在下面的示例中，我希望红色框（在标记中）在蓝色框向右移动时淡入，然后在蓝色框向右移动时淡出。

在此处设置了一个演示：https://stackblitz.com/edit/gsap-react-simple-transition-group-7dk91n

代码如下：

import React, { Component } from "react";
import { TweenMax } from "gsap/all";
import { Transition } from "react-transition-group";
import BlueBox from "./BlueBox.js";

class SimpleTransition extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: false,
      left: true,
      blueBoxes: [{delay:0},{delay:0.4}]
    };
    this.toggleComponent = this.toggleComponent.bind(this);
  }

  toggleComponent() {
    this.setState({
      show: !this.state.show,
      left: !this.state.left
    });
  }

  render() {
    const { show } = this.state;
    return <div className="container">
      <button onClick={ this.toggleComponent }>Click</button>
      {this.state.blueBoxes.map(( args ) =>
         <BlueBox
            state={this.state}
            delay={args.delay}
          ></BlueBox>
      )}

      <div>
        <Transition
          timeout={1000}
          mountOnEnter
          unmountOnExit
          in={show}
          addEndListener={(node, done) => {
            TweenMax.to(node, 0.4, {
              autoAlpha: show ? 1 : 0,
              onComplete: done
            });
          }}
        >
          <div className="box red"></div>
        </Transition>
      </div>

    </div>;
  }

}

export default SimpleTransition;

和

import React, { Component } from "react";
import { TweenMax } from "gsap/all";
import { Transition } from "react-transition-group";

class BlueBlox extends Component {

  constructor(props) {
    super(props);
    this.blueSquare = null;
  }

  componentDidUpdate( prevProps ) {
        const x = this.props.state.left ? 0 : 100;
    const delay = this.props.delay;
    console.log(delay)
    TweenMax.to( this.blueSquare, 1, {
      x: x,
      delay: delay
    })
    }

  render() {
    return <div
            className="box blue"
            ref={div => this.blueSquare = div}
          ></div>;
  }

}

export default BlueBlox;