动画按钮状态在两个组件之间作出反应

Question

我想在React中制作动画有点麻烦。 目前，我有2个解决方案，但我认为应该是更好的方法。

让我解释一下：

就像上面的gif一样，我有两个组件，第一个是带加号的标题（请注意，此加号不能居中，这取决于标题大小），第二个是带有居中的部分黑加;

我需要做的是：当第二部分击中第一个加号时，为第二个按钮设置动画，将白色加号转换为黑色加号。

我想象的解决方案：

• 点击他时计算白色加号的距离，然后通过redux将距离传递给第二个部分。为什么我不能这样做？因为有办法通过路线打开这个部分;
• 当我点击他时，将第一个白色按钮发送到第二部分，但Idk怎么做[我已经搜索了很多，没有运气:(];

代码

- 带有白色按钮的第一个组件

  render() {
    const {
      hide,
      changing,
      currentTitle,
      currentSubtitle,
      currentNumbers,
    } = this.state;
    const classNames = [ 'video__overlay', hide ? ' video__overlay--hidden' : '', changing ? ' video__overlay--off' : '', ].join('');

    return (
      <div className={`${classNames}`}>
        <small className="video__quantity" onAnimationEnd={this._animationHandler}>{this._breakLetters(currentNumbers)}</small>

        <div className="video__title-box">
          <h1 className="video__title"> {this._breakLetters(currentTitle)}</h1> // <--- The title that I was talking about

           {this.props.haveDetails && (
             <div className="video__plus">
               <Link to={`/info/${this.props.slug}`}>
                 <Isvg src="/assets/images/plus.svg" className="video__plus-svg" />
               </Link>
             </div>
           )}
         </div>

      <small className="video__subtitle" onAnimationEnd={this._animationHandler}>{this._breakLetters(currentSubtitle)}</small>
    </div>
);

}

- 带黑色按钮的第二个组件

  render() {
    const detailsClass = [ 'details', this.state.close ? ' details--out' : '', this.props.expanded ? ' details--noscroll' : '', ].join('');
    const contentClass = [ 'details__content', this.props.changing ? ' details__content--out' : '', ].join('');

    return (
      <div className={detailsClass} onWheel={this._handleWheel} onAnimationEnd={this._handleAnimation} ref="details">
        <div className={contentClass}>
          <div className="details__close-btn" onClick={this._handleClose}>
            <Isvg src="/assets/images/plus-variant.svg" />
        </div>

        <DetailsInfo />
        <DetailsStills images={this.props.images} subtitle={this.props.description} />
        <DetailsContinue />
      </div>
    </div>
   );
 }