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

Question

我采用了棱角分明4 NG-引导如图所示这里

我试图让模态滑动和淡入/淡出，但没有提供示例来做到这一点。我已经在这个线程上尝试了两种解决方案，例如使用自定义类'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 文件中。