angular - 使用 ng-bootstrap 模态 Angular 2+ 使模态淡入/淡出

Question

我将 Angular 4 与 ng-bootstrap 一起使用，如图所示 here

我正在尝试让模式滑动和淡入/淡出，但没有提供这样做的示例。我在 this thread 上尝试了这两种解决方案，例如使用自定义类“slideInUp”打开我的模态 -

this.modalService.open(content, {centered: true, backdrop: 'static', keyboard: false, windowClass:'slideInUp'}).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      })

并为“slideInUp”添加 css -

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 

类被应用，但转换没有发生。奇怪的是，如果我将 slideInUp 类应用于任何其他元素，例如模态框的 body 元素，它会起作用并且当模态框打开时正文内容会向上滑动。

如有任何帮助，我们将不胜感激。

Answer 1

给定的代码对我有用。请在全局(样式)css 文件中添加该 CSS。