没有使用react-transition-group和styled-components卸载组件

Question

我有一个使用react-transition-group进行动画制作的组件，如下所示：

import { CSSTransition } from 'react-transition-group';

//....
const popoverWindow = 'popover-window'

<CSSTransition
  in={popoverVisible}
  classNames={popoverWindow}
  unmountOnExit
>
  <PopoverWindow
    popoverEdit={popoverEdit}
    saved={isSaved(apiSaved)}
    emailLoading={emailLoading}
    emailView={emailView}
    key={popoverWindow}
  >

//....


const PopoverWindow = styled.div` // styled-component
  &.${popoverWindow}-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }

  &.${popoverWindow}-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
  }
  &.${popoverWindow}-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
  }

  &.${popoverWindow}-exit-active {
    opacity: 0;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }
`

尽管动画似乎可以正常运行，但即使使用暴露的道具unmountOnExit，也似乎无法卸载。我也尝试过设置unmountOnExit={true}，但这似乎也不起作用。

最近我尝试过

&.${popoverWindow}-exit-active {
    opacity: 0;
    display: none; // added this
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }

但这似乎也破坏了现有的动画。

无论我尝试什么，该组件似乎仍然停留在DOM上，而类-exit-active仍然停留在DOM上。有没有人知道如何通过卸载同时使其具有动画的方式从DOM中删除此组件？