Question

我正在使用带有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元素），它将起作用，并且在打开模态时，正文内容会向上滑动。

任何帮助都将不胜感激。

Answer 1

给定的代码对我有用。请将该CSS添加到global（style）css文件中。

Answer 2

从Chrome DevTools的“模态对话框” div中检查是否具有以下内容。

@media (prefers-reduced-motion: reduce)

如果您的操作系统偏好设置是限制动画，则这可能会覆盖您为动画设置的努力。

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

2 个答案: