Сделайте модальное постепенное увеличение / уменьшение с помощью ng-bootstrap модального Angular 2+ - PullRequest
Новая
       37

Сделайте модальное постепенное увеличение / уменьшение с помощью ng-bootstrap модального Angular 2+

0 голосов
/ 10 мая 2018

Я использую Angular 4 с ng-bootstrap, как показано здесь

Я пытаюсь заставить модал скользить и плавно входить / выходить, но нет примеров для этоготот.Я пробовал оба решения на этой теме , например, открывал мой модал так же с помощью пользовательского класса 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)}`;
      })

И добавление CSS для «slideInUp» - 

.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 к любому другому элементу, например элементу тела модального объекта, он работает, и содержимое тела перемещается вверх, когда открывается модальное окно.

Любая помощь будет принята.

1 Ответ

0 голосов
/ 30 апреля 2019

данный код работает на меня. Пожалуйста, добавьте этот CSS в глобальный (стиль) CSS-файл.

...