5

I am using Angular 4 with ng-bootstrap as shown here

I am trying to get the modal to slide and fade in/out, but there are no examples provided to do that. I have tried both solutions on this thread, such as opening my modal like so with a custom class '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)}`;
      })

And adding the css for the '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);
  }
  }

The class gets applied, but the transition does not happen. Strangely, if I apply the slideInUp class to any other element, such as the body element of the modal, it works and body content slides up when the modal is opened.

Any help would be appreciated.

Jonny Holmes
  • 161
  • 1
  • 14

2 Answers2

0

given code is working for me. kindly add that CSS in global(style) css file.

Syed Yawar
  • 103
  • 1
  • 9
0

Check to see if you have the following on your 'modal-dialog' div from Chrome DevTools.

@media (prefers-reduced-motion: reduce)

If your operating system preferences are to limit animation, this could override your efforts to animate.

Jason K.
  • 790
  • 1
  • 14
  • 22