ARcode pro asked 4 years ago


How do I modify the animations of a dynamic modal? My code is:, {
  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 =, {
    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.


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



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