React CSSTransition：淡入父级并翻译子级

Question

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

<CSSTransition
  in={!!props.screen}
  timeout={300}
  unmountOnExit
  classNames='modal'
>
  <div className='modal' onClick={closeModal}>
    <div className='modal--modalCard'>Login</div>
  </div>
</CSSTransition>

和无礼的人

.modal {
  background-color: $modal-background;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  align-items: center;

  &-enter {
    background-color: $transparent;
  }
  &-enter-active {
    background-color: $modal-background;
    transition: background-color 300ms ease-in;
  }
  &-exit {
    background-color: $modal-background;
  }
  &-exit-active {
    background-color: $transparent;
    transition: background-color 300ms ease-in;
  }
  &--modalCard {
    width: 400px;
    margin: 0 auto;
    padding: 40px;
    background-color: $secondary;
    border-radius: 8px;
    box-shadow: $depth-1;
  }
}

模态很好地淡入，但我似乎无法瞄准modal--modalCard，我想使modal--modalCard看起来像是从顶部滑入，同时使其从0变到1不透明，与此同时，模态bakcgorund的动画效果与现在一样