javascript - 如何使模态框的动画在模态框消失在屏幕上之前执行？反应

Question

我有一个在进入和退出屏幕时制作动画的模式，但是在退出时它在制作动画之前就消失了，我无法识别错误。任何人都可以帮忙吗？我的代码：

displayModal ? (
    <Background>
      <Backdrop onClick={closeModal} />
      <Container closeModal={closeModal} displayModal={displayModal}>
        {children}
      </Container>
    </Background>
  ) : null;

//animations

const animationIn = keyframes`
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(0);
  }
`;

const animationOut = keyframes`
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100vh);
  }
`;

const Container = styled.div<ContainerProps>`
  visibility: visible;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  animation: ${({ displayModal }) =>
    displayModal
      ? css`
          ${animationIn} 0.5s ease-out forwards;
        `
      : css`
          ${animationOut} 0.5s ease-out forwards;
        `};

  z-index: 600;
  bottom: 0;
`;

基本上，在输入的动画中它工作正常，但是当我单击关闭模式时，它会迅速消失，而不是制作动画

标签： javascriptreactjstypescriptreact-nativestyled-components