Topic: Modal animations
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
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 11 months 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 11 months 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
}
Answered
- User: Pro
- Premium support: No
- Technology: Angular
- MDB Version: 9.2.0
- Device: Computer
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No