我正在使用带有ng-bootstrap的Angular 4，如图所示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元素），它将起作用，并且在打开模态时，正文内容会向上滑动 .
任何帮助，将不胜感激 .