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

Question

我正在使用带有ng-bootstrap的Angular 4，如下所示

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

Answer 2

检查ChromeDevTools的"modal-dialog"div上是否有以下内容。

@media (prefers-reduced-motion: reduce)

如果您的操作系统首选项要限制动画，这可能会覆盖您制作动画的努力。