使用纯CSS进行淡入淡出反应

Question

我是React的新手。我有一个带有登录按钮的小应用程序。当我单击登录按钮并触发来自后端的错误时，将显示一条烤面包错误消息。我想显示动画从下到上的淡入和淡出。目前，仅用于Toast消息的淡入淡出动画正在起作用。但是如何触发淡出动画？

errorMessage来自redux mapStateToProps函数。 clearAuthErrorAction是一个操作，它将从redux状态中删除错误消息。

 <AuthenticationAlert errorMessage={errorMessage}>
   {setTimeout(() => clearAuthErrorAction(), 3000)}
 </AuthenticationAlert>

.toast__container {
...
animation: slideInTop 0.5s linear;
}

 @keyframes slideInTop {
    0% {
      transform: translateY(-1.5rem);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideInBottom {
    0% {
      transform: translateY(1.5rem);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

解决方案很简单。我调整了CSS中的动画。

@keyframes slideInTop {
        0% {
      transform: translateY(-3rem);
      opacity: 0;
    }

    50% {
      transform: translateY(0);
      opacity: 1;
    }

    100% {
      transform: translateY(-20rem);
      opacity: 0;
    }
  }