Angular 4中使用ng-bootstrap实现模态框滑入淡出动画失效问题

我之前也碰到过类似的坑，ng-bootstrap的模态框有自己的层级结构，你把slideInUp类加在windowClass上其实是作用到了最外层的全屏模态框容器（.modal元素），但这个元素默认带有fade类的透明度过渡效果，和你的位移关键帧动画冲突了，所以动画没生效。

正确的解决思路：把动画精准作用到对话框容器 #

ng-bootstrap的核心内容容器是.modal-dialog，我们需要把动画绑定到这个元素上，而不是最外层的全屏容器。

1. 修改CSS样式

调整动画的作用目标，同时可选禁用默认的淡入过渡避免冲突：

/* 给带有slideInUp类的模态框对话框应用滑入动画 */
.slideInUp .modal-dialog {
  animation-name: slideInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* 定义滑入动画关键帧 */
@keyframes slideInUp {
  0% {
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    transform: translateY(0);
  }
}

/* 可选：禁用默认淡入过渡，让滑入效果更纯粹 */
.slideInUp {
  opacity: 1 !important;
  transition: none !important;
}

2. 保留原有的模态框调用代码

你之前的modalService.open配置完全没问题，不用修改：

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)}`; }
);

为什么这样能生效？ #

• windowClass会把slideInUp类添加到最外层的.modal容器，通过CSS后代选择器，我们把动画精准定位到实际的对话框容器.modal-dialog上，这才是用户视觉上的模态框主体。
• 可选关闭默认的fade过渡，避免透明度变化和位移动画互相干扰，确保滑入效果清晰呈现。

如果需要添加关闭时的淡出动画，你还可以监听模态框的关闭事件，给.modal-dialog追加退出动画类，或者通过CSS的:not(.show)状态定义退出帧动画，这个可以根据需求再扩展。

内容的提问来源于stack exchange，提问作者Jonny Holmes