角材料-底片-动画顶

Question

我正在尝试将有角材料的底部放到屏幕顶部。

在stackoverflow 上打开了一个案例，答案是重写某些CSS：

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

::ng-deep .cdk-overlay-pane{
  top: 0 !important;
  position: absolute !important;
  transform: translateY(-250%);
  animation: slideDown 0.5s forwards 0s ease-in;
}

::ng-deep .cdk-overlay-container > * {
 animation: none;
}

但是我不知道如何在“关闭”时反转动画，当我向上滚动时它会下降！

这里是stackblitz

上的示例

感谢您的帮助！