时间戳

首页 > 解决方案 > 使用 ng-bootstrap modal Angular 2+ 使模式淡入/淡出

angular - 使用 ng-bootstrap modal Angular 2+ 使模式淡入/淡出

问题描述

我正在使用带有 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 类应用于任何其他元素，例如模态框的主体元素，它会起作用，并且在打开模态框时主体内容会向上滑动。

任何帮助，将不胜感激。

标签： angularmodal-dialogangular5fadeout

解决方案

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

推荐阅读