ARcode pro asked 4 years ago


Hello,

How do I modify the animations of a dynamic modal? My code is:

this.modalService.show(ModalComponent, {
  backdrop: true,
  keyboard: true,
  focus: true,
  show: false,
  ignoreBackdropClick: true,
  class: 'modal-full-height modal-right',
  containerClass: '',
  animated: true,
  data: {
    content: myContent,
  }
})

This seems to have the animations fadeInTop and fadeOutTop, but I would like to change them if possible. Is there any other option to do so?

Thank you


Konrad Stępień staff answered 4 years ago


If you want to change the direction of modal animation, add class .top, .right, .bottom or .left to the .modal div.

.modal-side + .modal-top-right Top Right

.modal-side + .modal-top-left Top Left

.modal-side + .modal-bottom-right Bottom Right

.modal-side + .modal-bottom-right Bottom Left

Then set data like this:

this.modalRef = this.modalService.show(ModalComponent, {
    class: 'modal-side modal-top-right', //You need to include 'modal-side' class
});

ARcode pro commented 4 years ago

Nice! I managed to change it!

One more question, is it possible to modify the animation speed? At least on the Jquery version there are the classes "fast", "faster", etc.. Is there something to achieve the same result?

Thanks again


Konrad Stępień staff commented 4 years ago

The styles should be the same as in jQuery. If such classes exist there, they should also be used in Angular.

Or, you can change transition property in your file styles.scss

Like this:

.fade {
    transition: opacity 1.5s linear
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.2.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No