Fashionable ng-bootstrap animation

Question

The fade class does not work on the ngb modal.

I looked at trying to apply my own animation to a modal, but the modal template is explicitly entered into the modal dialog using ng-bootstrap, for example. I do not have access to a modal dialog. I have only access to the template:

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header card-header" style="border-radius: 10px;">
    <h4 class="modal-title">Contact Form</h4>
 </div>
    <div class="modal-body"> </div>
...etc
</template>

I need to apply my animation to a top-level dialog, otherwise just bits of a modal animat. If I applied it to the template, it will explode.

Any idea how I could revive the whole modal

Answer 1

Here is a simple solution. Just put this in style.css

/* modal animation */
.modal-content{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  75%  {transform: scale(1.1)}
  100% {transform: scale(1)}
}

Answer 2

CSS NgbModalOptions.

styles.css:// css

.modal-holder{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  100% {transform: scale(1)}
}

modal.component.ts

const modalRef = this.modalService.open(NgbdModalContent, {windowClass: 'modal-holder', centered: true});

, :

StackBlitz

Answer 3

Just use ngx-bootstrap, which works almost the same as ng-bootstrap, but has built-in modal animation. See the demo and code here:

https://valor-software.com/ngx-bootstrap/#/modals

Answer 4

Unfortunately, animations on ng-bootstraps are not yet supported. Also, I managed to make a workaround using jquery for animation:

  open(content, config) {
    this.ngbModal.open(content);
    $('.modal-content').animate({ opacity: 1 });
    $('.modal-backdrop').animate({ opacity: 0.9 });

  }

and in root .css styles you also need to:

.modal-backdrop.show {
  opacity: 0;
  transition: 4s;
}

.modal-content {
  opacity: 0;
  transition: 0.15s;
}