Javascript React，ReactCSTranssitionGroup出现工作但未离开

我正在构建一个小的全局“toast”组件。它以我从redux州提供给它的祝酒词列表为依据。我试图让他们用react的

ReactCSTransanizingGroup

制作进出动画，我似乎能够获得进入/活动动画，但无法获得离开

以下是我的组件：

   export default class FollainToast extends React.Component {
  constructor(props) {
    super(props);

    this.mapToasts = this.mapToasts.bind(this);
  }

  mapToasts() {
    return this.props.display.toasts.map((toast) => {
      return (
        <div className="my-toast" key={toast.id}>
          <p className="toast-msg">{toast.msg}</p>
        </div>
      );
    });
  }

  render() {
    if (this.props.display && this.props.display.toasts && this.props.display.toasts.length > 0) {
      return (
        <div className="row">
          <ReactCSSTransitionGroup
            transitionName="toasty"
            transitionAppear
            transitionAppearTimeout={400}
            transitionEnter
            transitionEnterTimeout={400}
            transitionLeave
            transitionLeaveTimeout={400}
            >
          {this.mapToasts()}
          </ReactCSSTransitionGroup>
        </div>
      );
    }
    return null;
  }
}

---

enter动画工作得很好，但是当toast从toast列表中删除时，它会立即从dom中消失。谢谢你的阅读

如果您没有返回null，而是将其更改为不可见，这样会重新呈现它呢？根据，休假的转换需要处于

toasty leave active

（您的位于

toasty leave

）。出于调试目的，我会将

toasty leave

的转换时间增加到

reactcstransitinggroup

中的10秒，然后离开。然后，测试您的CSS。如果您没有返回null，而是将其更改为不可见，从而重新呈现它呢？根据，休假的转换需要在

toasty leave active

中（您的在

toasty leave

中）。出于调试目的，我会将

toasty leave

的转换时间增加到

reactcstransitinggroup

中的10秒，然后离开。然后，测试你的CSS。

.toasty-appear, .toasty-enter {
  opacity: 0.01;
  transform:   translate(-250px,0);
  transform: translate3d(0,-100%,0);
}

.toasty-appear.toasty-appear-active, .toasty-enter..toasty-enter-active {
  opacity: 1;
  transition: opacity 1s ease;
  transform:   translate(0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}

.toasty-leave {
  opacity: 1;
  transform:   translate(0,0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.toasty-leave.toasty-leave-active {
  opacity: 0.01;
  transform:   translate(-250px,0);
  transform: translate3d(0,-100%,0);
}