当React组件被销毁时如何为其动画？

Question

我有一个简单的Notifications组件，它呈现了一系列Notification组件。我想让通知淡入淡出。因此，我安装了react-transition-group并尝试了一下。

不过，我无法完全正常工作。添加新通知后，它会淡入，但是删除通知时，它只会消失-不会消失。

这就是我所拥有的：

组件：

export default function Notifications({ notifications }) {
  return (
    <NotificationsContainer style={{ top: 'calc(100% - ' + (4.5 * notifications.length) + 'em)'}}>
      <TransitionGroup className="notifications">
        {[...notifications].reverse().map(notification => (
          <CSSTransition key={notification.timestamp} timeout={500} classNames="notification">
            <Notification emoji={notification.emoji} />
          </CSSTransition>
        ))}
      </TransitionGroup>
    </NotificationsContainer>
  );
}

CSS：

  .notification-enter {
    opacity: 0;
  }

  .notification-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease-in;
  }

  .notification-exit {
    opacity: 1;
  }

  .notification-exit-active {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }